Question

您好我正在使用此范围滑块： http://rangeslider.js.org/

我想知道如何在输出div上添加小数点，如下所示：1.000,000

Answer 1

很抱歉跳进去，但我实际上有同样的问题......

示例从“0”变为“100” - 想知道如何以从“0”变为“100000”的方式更改它并显示“100.000”而不是“100000”。

另外很高兴知道是否可以添加“€”符号？

非常感谢所有能提供帮助的人！

http://codepen.io/andreruffert/pen/meeOav

HTML

<h1>Vertical orientation support</h1>
<input type="range" data-orientation="vertical">
<output></output>

使用Javascript：

var $element = $('input[type="range"]');
var $output = $('output');

function updateOutput(el, val) {
  el.textContent = val;
}

$element
  .rangeslider({
    polyfill: false,
    onInit: function() {
      updateOutput($output[0], this.value);
    }
  })
  .on('input', function() {
    updateOutput($output[0], this.value);
  });

CSS

output {
  font-size: 2em;
  padding: .3em;
}

Answer 2

我在朋友的帮助下找到了解决方案。在调用函数的地方进行这些更改以启动滑块。

这是代码最初的样子：

var $element1 = $('#slider_range_1');
var $output1 = $('#output_1');

$element1
  .rangeslider({
    polyfill: false,
    onInit: function() {
    updateOutput($output1[0], this.value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }
})

.on('input', function() {
    updateOutput($output1[0],parseInt(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    console.log(this.value);
});

下面的代码格式化输出并将小数点和美元符号添加到其中

 .toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')

进行更改后，代码应如下所示。

var $element1 = $('#slider_range_1');
var $output1 = $('#output_1');

$element1
  .rangeslider({
    polyfill: false,
    onInit: function() {
    updateOutput($output1[0], this.value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }
})

.on('input', function() {
    updateOutput($output1[0],parseInt(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    console.log(this.value);
});

Rangeslider.js将小数点添加到输出中

2 个答案: