How to add units to roundslider's values?

Question

I have a roundslider widget and I am trying to add units to its values, when value = 0-999 then Hz unit should show up next to the value, and when value = 1000-999999 then it is KHz ... so on so forth.

This is my original slider:

$("#slider").roundSlider({
  sliderType: "min-range",
  radius: 150,
  handleSize: "+12",
  mouseScrollAction: true,
  min: 0,
  max: 100000000,
  value: 0, // default value at start

  change: function(event) {
   $.getJSON('/set_Frequency/' + event.value);
  }

});

And here is my non working attempt:

$("#slider").roundSlider({
  sliderType: "min-range",
  radius: 150,
  handleSize: "+12",
  mouseScrollAction: true,
  min: 0,
  max: 100000000,
  value: 0, // default value at start



  //change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
  change: function(event) {
var value = event.value, content;
if (value <= 999) content = "Hz";
else if (value <= 999999) content = "KHz";
else if (value >= 1000000) content = "MHz";
else content = "GHz";
   $.getJSON('/set_Frequency/' + event.value + content);
  }

});

Can you help please?

Answer 1

For any formatting you can use the tooltipFormat event. I hope for your scenario you want to select any value from Hz - GHz.

I have updated the demo based on your required logic. Here you can select the value from 1 kHz to 100 MHz.

DEMO

And, if you can show your actual use-case scenario then I can do a better suggestion for your requirement.