如何将单位添加到 roundslider 的值？

Question

我有一个 roundslider 小部件，我正在尝试向它的值添加单位，当值 = 0-999 时，Hz 单位应该显示在值旁边，当值 = 1000-999999 时，它是 KHz 。 ..等等等等。

这是我原来的滑块：

$("#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);
  }

});

这是我的无效尝试：

$("#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);
  }

});

你能帮忙吗？

Answer 1

对于任何格式，您都可以使用 tooltipFormat 事件。我希望在您的场景中，您想要 select Hz - GHz 的任何值。

我已经根据您需要的逻辑更新了演示。在这里您可以 select 从 1 kHz 到 100 MHz 的值。

DEMO

而且，如果您能展示您的实际用例场景，那么我可以针对您的要求提出更好的建议。

如何将单位添加到 roundslider 的值？

How to add units to roundslider's values?

javascript

json

round-slider

DEMO