2

我目前的 nouislider 工作正常。但是，我想在我的输入字段中添加一个后缀“%”符号，以向用户显示该值是一个百分比值，而我遇到的问题是与表单一起传递的值包含 % 符号。有谁知道一种解决方法，以便只有值与表单一起传递？

我尝试的另一种方法是 nouislider 文档中建议的 format:wNumb 方法，如下所示：

slider.noUiSlider.on('update', function( values, handle ) {
    moistureValues[handle].value = values[handle] + '%';
});

但是，这仍然将百分比符号附加到 url。有没有其他方法可以解决这个问题？谢谢

4

2 回答 2

3

输入的值是提交的值，这就是 HTML 中基本功能的工作方式。你有一些选择：

  • 将%符号放在<span>输入之后。
  • 在表单上使用addEventListener('submit', ...)，捕获提交，然后更改输入值并重新提交（使用.submit()）。
  • 在跨度中显示整个值，并为提交值使用单独的（隐藏的）输入。

（披露：我是这个库的主要开发人员）。

于 2016-02-08T16:47:25.580 回答
-2

您正在更改value同时您只需要更改style元素的：

connectBar.style[side] = offset + '%';

完整示例：

var connectSlider = document.getElementById('connect');

 noUiSlider.create(connectSlider, {
    start: [20, 80],
    connect: false,
    range: {
        'min': 0,
        'max': 100
    }
});    

var connectBar = document.createElement('div'),
    connectBase = connectSlider.getElementsByClassName('noUi-base')[0],
    connectHandles = connectSlider.getElementsByClassName('noUi-origin');

// Give the bar a class for styling and add it to the slider.
connectBar.className += 'connect';
connectBase.appendChild(connectBar);

connectSlider.noUiSlider.on('update', function( values, handle ) {

    // Pick left for the first handle, right for the second.
    var side = handle ? 'right' : 'left',
    // Get the handle position and trim the '%' sign.
        offset = (connectHandles[handle].style.left).slice(0, - 1);

    // Right offset is 100% - left offset
    if ( handle === 1 ) {
        offset = 100 - offset;
    }

    connectBar.style[side] = offset + '%';
});

请参阅此处的示例：https ://refreshless.com/nouislider/examples/#section-custom-connect

于 2016-02-06T15:03:13.903 回答