Slider range Jquery-ui

Par stalker069, il y a 10 ans

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, il y a 10 ans

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/