Leave the center bar using dragdealer.js

Question

Leave the center bar using dragdealer.js

Navigation

#1 by (3 votes)

1

I'm using this library to create bars that the user can interact with: link .

I would like the drag bar to start at 0, in the middle of the bar:

However,Ihaveitasfollows:

HTML:

<divid="just-a-slider4" class="dragdealer">
   <div style="text-align:center" class="handle red-bar">
      <span class="value"></span>%
   </div>
</div>

CSS:

#just-a-slider {
   height: 60px;
   width: 100%;
   border-radius: 3px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
   align-content: center;
}
#just-a-slider .handle {
   height: 60px;
   line-height: 60px;
   border-radius: 3px;
   background-color:#2c3e50;
}

JavaScript:

$(function() {
   new Dragdealer('just-a-slider', {
      animationCallback: function(x, y) {
         $('#just-a-slider .value').text(Math.round(x = 100-x*200));
         if (x <0 ) {
            $('#just-a-slider .value').text(Math.round(x = -x));;
         }
      }
   });
})

javascript jquery

asked by anonymous 08.11.2015 / 18:04

1 answer

Queries @media for sites 100% responsive? How to make the weapon disappear on the same key that makes it appear in UNITY

score 3 · Accepted Answer

Just use the setValue method to specify the initial value you want. See the function with some optimizations:

d = new Dragdealer('just-a-slider', {
    animationCallback: function(x, y) {
        document.getElementById('value').innerText = Math.abs( Math.floor(x*200-100) );
    }
});

// Aqui setamos o valor inicial:
d.setValue(0.5, 0, true);

See the demo at JS Fiddle .

Notes:

I changed the class of ID by ID, to facilitate the update of the uncomplicated value;
The function 4 returns the always positive number, eliminating the need for the just-a-slider you used in Callback . Which by the way, I had two value assignments that I imagine are not necessary.

Follow the updated HTML:

<div id="just-a-slider">
   <div class="handle" style="text-align:center">
      <span id="value">0</span>%
   </div>
</div>