Slider range Jquery-ui

stalker069
Javascript

Bonjour,
Je veux faire un slider range de cette forme :
http://hpics.li/409aee2
Pour le moment j'arrive à cela mais je n'arrive pas à faire la barre au niveau du 0
http://hpics.li/1956f14

Voici mon code si une personne a une idée ça serai sympa

html:
<div class="flat-slider" id="flat-slider" data-min = "-3000" data-max="10000"></div>
 <span class="min-slider">-3000</span>
<span class="max-slider">10000</span>
js:
    var max = parseInt($('#flat-slider').attr('data-max'));
    var min = parseInt($('#flat-slider').attr('data-min'));
    console.log(max+' '+min);
    $('#flat-slider').slider({
        orientation: 'horizontal',
        range: true,
        min: min,
        max: max,
        values: [0,max],
        slide: function( event, ui ) { 
            $( ".min-slider" ).text(ui.values[ 0 ]);
            $( ".max-slider" ).text(ui.values[ 1 ]);
        },
    });

1 réponse

nico41

bonjour,

html:
<div class="flat-slider" id="flat-slider" data-min = "-3000" data-max="10000">
    <div class="zerobar"></div>
</div>
css:

.flat-slider {
    position: relative;
    ...
}
.zerobar {
    position: absolute;
   display: none;
    width: 2px;
    height: 6px;
    top: -3px;
    ...
}
js :
var sliderWidth = $('.flat-slider').width();
var zerobar =  $('.zerobar');
if (min < 0 && max > 0 ) { // parce que sinon aucun interêt
**//attention peut être des arrondis à prévoir**
   var unit = sliderWidth / ( max + Math.abs(min)); 
   zerobar.show();
   var zerobarX = (unit * Math.abs(min)) - (zerobar.width() / 2);
  zerobar.css({ left: zerobarX + "px" });
}

https://jsfiddle.net/nicolas_canfrere/ntu4pume/4/