CODEWITHSUNDEEP
javascriptjqueryjquery-pluginssliderround-slider
Visahan
Visahan

Reputation: 1192

jQuery Round Slider add shorthand values to range

I'm using Round Slider in my application where the slider type is range. My range varies from 0-2 million. I have a requirement where if the value is above 1000, it should be represented such as 1k (1200 as 1.2k), and if the value is above 1000000, it should be represented such as 1M (1200000 as 1.2M). So far I could not find a way to do this.

If there is a way to do this?

Thanks in advance

Upvotes: 0

Views: 522

Answers (1)

osjo
osjo

Reputation: 131

You can use tooltipFormat property to achieve this behaviour

HTML

<div id="slider"></div>

JS

window.formatter = function(e) {
  if (e.value >= 1000000) {
    return Math.round(e.value / 100000) / 10 + "M";
  }
  if (e.value >= 1000) {
    return Math.round(e.value / 100) / 10 + "k";
  }
  return e.value;
}

$("#slider").roundSlider({
  sliderType: "min-range",
  value: 45,
  max: 2000000,
  tooltipFormat: "formatter"
});

http://jsfiddle.net/osjo/4g5r0mex/4/

Upvotes: 3

Related Questions