Add labels to the range slider

[Kbroeren]

Hi, is it possible to add labels at the range slider. example: when the range of the slider is from zero till 100, with 10 steps. The labels on the slider are then, 10, 20, 30 etc...

Thanks!

[andreruffert]

I made a quick codepen for a possible solution.

[Kbroeren]

Hi André,

Thanks for the feedback.

Too bad it doesn´t work for me with my code. Can you take a look at it ?

$('input[type="snelheid"]').rangeslider({

    polyfill: false,

    onInit: function() {

        this.update();

    },

    onSlide: function(pos, value) {

        tempPosition = pos + this.grabX;

        position = (tempPosition <= this.handleWidth) ? this.handleWidth : (tempPosition >= this.maxHandleX) ? this.maxHandleX : tempPosition;

        clearTimeout(timer); //Cancel the currently pending execution of counter();

        speed = value;

        timer = setTimeout(counter, speed);

    }

});

Thanks!

Kevin

Van: André Ruffert [mailto:notifications@github.com] Verzonden: donderdag 26 februari 2015 23:42 Aan: andreruffert/rangeslider.js CC: Kbroeren Onderwerp: Re: [rangeslider.js] Add labels to the range slider (#127)

I made a quick codepen http://codepen.io/andreruffert/pen/yyEVrE for a possible solution.

— Reply to this email directly or view it on GitHub https://github.com/andreruffert/rangeslider.js/issues/127#issuecomment-76291014 . https://github.com/notifications/beacon/AHFB9BuDD36iFd3xj7RsYfRTgJdynwd9ks5nv5ixgaJpZM4DeWQQ.gif

Geen virus gevonden in dit bericht. Gecontroleerd door AVG - www.avg.com Versie: 2014.0.4800 / Virusdatabase: 4257/9185 - datum van uitgifte: 02/26/15

[andreruffert]

K I'm a bit confused! Your not using any code from the codepen so of course it doesn't work...

What do you exactly wanna achieve?

Why do you call the update() fn on onInit? It get's automatically called on initialisation.

onInit: function() {
    this.update();
},
...

And what's goin on in the onSlide fn? For what do you set the position you are not using it anywhere?

onSlide: function(pos, value) {
    tempPosition = pos + this.grabX;

    position = (tempPosition <= this.handleWidth) ? this.handleWidth : (tempPosition >= this.maxHandleX) ? this.maxHandleX : tempPosition;

    clearTimeout(timer); //Cancel the currently pending execution of counter();

    speed = value;

    timer = setTimeout(counter, speed);
}