在 Nouislider 中仅显示一张幻灯片

Posted 2023-03-13

【中文标题】在 Nouislider 中仅显示一张幻灯片

【英文标题】：Show only one slide in Nouislider

【发布时间】：2016-07-25 12:13:50

【问题描述】：

我在我的开发站点上使用 Nouislider，以便让用户从范围中选择他的薪水。 关键是我希望用户选择他的薪水而不是范围（例如 2500 欧元） 我无法在我的 nouislider 中只显示一个选择器而不是双选择器（范围选择器）。 此外，我的数据以 €（欧元）为单位，我无法让我的选项起作用（€ 符号和数千个空格）

这是我的代码：

<?php if($_SERVER['REQUEST_METHOD'] == 'POST' &&     $_POST['submit']=="Send")
echo "Your selected no:". $_POST['number'];
?>    

<div class="example">
<div id="html5"></div>
<form action="/" method="post">
<select id="input-select" name="number"></select>
<input type="submit" name="submit" value="Envoyer" />
</form>

<script>
var select = document.getElementById('input-select');

// Append the option elements
for ( var i = 1000; i <= 8000; i=i+1 )

var option = document.createElement("option");
    option.text = i;
    option.value = i;

select.appendChild(option);

document.getElementById('input-number')
</script>           
<script>
var html5Slider = document.getElementById('html5');

noUiSlider.create(html5Slider, 
start: [ 1000, 1000 ],
connect: true,
range: 
    'min': 1000,
      'max': 8000
,
format: wNumb(
decimals: 0,
thousand: '',
postfix: ' €'
)
);



</script>           
<script>
var inputNumber = document.getElementById('input-number');

html5Slider.noUiSlider.on('update', function( values, handle ) 

var value = values[handle];

if ( handle ) 
inputNumber.value = value;
else 
    select.value = Math.round(value);

);

select.addEventListener('change', function()
html5Slider.noUiSlider.set([this.value, null]);
);

inputNumber.addEventListener('change', function()
html5Slider.noUiSlider.set([null, this.value]);
);
</script>       
</div>

感谢您的帮助。

最好的问候。

【参考方案1】：

首先：不要这样做：

 for ( var i = 1000; i <= 8000; i=i+1 )
     var option = document.createElement("option");

创建 7000 个选项元素会很慢。

要创建一个而不是两个句柄，请使用start: 1000 而不是start: [ 1000, 1000 ]。

【讨论】：

如果我更改栏不会加载：开始：[1000, 1000]，开始：1000，对于 7000 个选项元素，我该如何以另一种方式执行此操作？谢谢