How to show floats based on the labels

[abishekrsrikaanth]

Based on the below image, if you notice, the label is different from that of the float that is showing up (Label: 30, Float: 3).

The code that I have used to generate this slider is

$('.goal-slider').slider({
            rest: 'label',
            max: 13,
            min: 1,
            value: 3
        }).slider('pips', {
            rest: 'label',
            labels: ['10', '20', '30', '40', '50', '75', '100', '125', '150', '175', '200', '250', '300']
        }).slider('float');

How can I make the floats to show the same as the labels on the slider.

[simeydotme]

Hi Abi,
There's actually an oversight in my plugin, with the floats there should be the ability to mimic the labels on the pips, right now it just adds the numerical value. I will fix this ASAP. I hope it doesn't hold you up! :)

Simon

[abishekrsrikaanth]

I can work with what I have right now as I am currently in development, but do you have any timelines on when this fix would be available?

[simeydotme]

I've updated the plugin to version 1.3.0.
This version allows you to set labels for the pips, as well as for the floats.

I suggest you set the array of labels once, and reference like so:

var myLabels = [10,20,30,40,50,75,100,125,150,175,200,250,300];

$(".mySlider")
  .slider({ min: 0, max: 12 })
  .slider("pips", { labels: myLabels , rest: "label" })
  .slider("float", { labels: myLabels })
  .on("slidechange", function(e,ui) {
    var data = myLabels[ui.value];

    // this will be your useful data.
    console.log(data); 
    // put it into a hidden text-field, or send it via ajax, whatever :)
  });

Hope this is clear enough :)

One last time: My plugin is not supposed to handle any logic, it's purely a visual aid. If you want to get the value 75 on the 6th pip, you can do this visually... but to get it into your system as data... you'll have to write your own logic into the UI like i've shown, or do it in the Back-end :)

Regards, Simon.

[abishekrsrikaanth]

Understand what you have mentioned on your example. Also I agree that keeping the plugin just for the visual aid is a good way to go. Appreciate that you got this issue fixed very quickly. Thanks