在Nouislider中只显示一张幻灯片

Show only one slide in Nouislider

本文关键字:一张 幻灯片 Nouislider 显示      更新时间:2023-09-26

我在我的开发网站上使用Nouislider,以便用户从范围中选择他的工资。重点是,我希望用户选择他的工资,而不是一个范围(例如2500欧元)我无法在我的noislider中只显示一个选择器而不显示两个选择器(范围选择器)。此外,我的数据是以欧元(欧元)为单位的,我无法让我的选项发挥作用(欧元符号和数千个空格)

这是我的代码:

<?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>

谢谢你的帮助。

致以最良好的问候。

第一:不要这样做:

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

创建7000个选项元素将是缓慢的。

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