Как установить плавающее число с помощью плагина jquery roundslider?

Я использую плагин jquery roundslider http://roundsliderui.com/ но не могу установить плавающее число. Когда я устанавливаю плагин с плавающим числом вокруг значения, но я не хочу этого. Как я могу решить это?

$("#slider").roundSlider({
    sliderType: "min-range",
    value: 40
});

http://jsfiddle.net/soundar24/s5gpugjn/

Источник

1 ответ

Решение

Из чтения их документации невозможно использовать значения с плавающей запятой внутри слайдера. Чтобы исправить это, вы можете использовать значение, которое на 10 единиц больше, чем исходное число для каждой требуемой десятичной точки, а затем разделите его на эту степень при отображении.

Для этого вам нужно подключить к create, drag а также change события и вручную установить текст, отображаемый в центре ползунка, например:

$("#slider").roundSlider({
  sliderType: "min-range",
  min: 0,
  max: 1000,
  value: 400,
  drag: updateValue,
  change: updateValue,
  create: updateValue
});

function updateValue(o) {
  $('#slider .rs-tooltip.rs-tooltip-text').text((o.value / 10).toFixed(1));
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<div id="slider"></div>

Источник

RoundSlider, имеющий свойство step, на основании этого ползунок увеличивает или уменьшает значение. Поэтому, если вы хотите разрешить плавающее число, вы можете установить значение шага как "0,1", "0,01" или "0,001" в зависимости от того, сколько десятичных знаков вы хотите.

Проверьте ниже демо:

DEMO

Источник
Другие вопросы по тегам