Leave the bar centered using dragdealer.js

Question

I am using this library to create bars that the user can interact with: http://skidding.github.io/dragdealer.

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

But I have it this way:

HTML:

<div id="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));;
         }
      }
   });
})

Answer 1

Just use the method setValue to specify the desired initial value. See 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 on JS Fiddle.

Notes:

• In HTML I hit the ID of your code, you had a 4 remaining at the end of just-a-slider;

• I switched the class of value by ID, to facilitate the update of uncomplicated value;

• In the callback I eliminated the jQuery dependency, to get a demo more suitable for general use;

• The function Math.abs returns the always positive number, eliminating the need for the if that you used on Callback. Who, by the way, had two assignments x = 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>