Slider with % AND dynamic value - can't seem to get prettify to work

[aximuseng]

I have an existing slider with data attributes like this:

min: 0, max: 100, step: 1, postfix: '%'

I would like to have the slider display like this (I manually edited the HTML to show this):

The page has multiple sliders in a nested form so each has an associated base multiplier amount i.e. $10,000 x 50% and the slider handle would dynamically update.

My thought here is that I do this:

min: 0, max: 100, step: 1, value: 10000

then I tried this:

$(".myclass").ionRangeSlider()({
  min: 0,
  max: 100,
  step: 1,
  value: $(this).data('value'),
  prettify: function(n) {
    return n + '%' + ' ($' + value * n / 100 + ')';
  }
});

and get:

I will admit to not being the most proficient at JS so I may be missing something minor / obvious here. After some digging I think I am not accessing the value data attribute. I also tried this (and realized I need to turn my string to a float):

$(".myclass").ionRangeSlider()({
  min: 0,
  max: 100,
  step: 1,
  prettify: function(n) {
    return n + '%' + ' ($' + parseFloat($(this).data('value')) * n / 100 + ')';
  }
});

[IonDen]

Hi, here is the demo: https://jsfiddle.net/qu8jsmy6/

const $range = $(".js-range-slider");
const totalInDollars = 5000;

$range.ionRangeSlider({
  skin: "big",
  type: "single",
  min: 0,
  max: 100,
  from: 50,
  prettify: (n) => {
    const current = totalInDollars / 100 * n;
    return `${n}% (\$${current})`;
  }
});

Usually problems like yours are happening then you are trying to do all steps in 1 line. Split your code. First calculate number in dollars and then it will work much better.

And it will be much easier to debug with console log.

[aximuseng]

That works except in my case the totalInDollars value is different for each slider on the page. This is why I tried to add a data attribute to each slider and then reference it with $(this).

[IonDen]

Yes of course you could get totalInDollars from data attribute. Don't forget to parseFloat it.

[aximuseng]

Not sure how to do this then:

https://jsfiddle.net/jasper502/ck9yuxmj/4/

[IonDen]

You can't access slider via $(this) in prettify. Workaround: https://jsfiddle.net/e2xzpoag/

[aximuseng]

Thanks - that looks like something I can work with 👍. Is direct access to the data attributes something that could be considered in a future release? I think my example show where that would be valuable.

[IonDen]

Yes, I will think about it.

[aximuseng]

I ended up settling on this (bac is my data attribute value):

$('.js-range-slider').each(function() {
  var bac;
  bac = parseFloat($(this).data('bac'));
  return $(this).ionRangeSlider({
    prettify: function(n) {
      var current;
      current = Math.round(bac / 100 * n);
      return n + '%' + ' ($' + current + ')';
    }
  });
});