2016-07-25 21 views
0

私は自分の開発サイトでNouisliderを使用しており、ユーザが範囲から給料を選択できるようにしています。 重要な点は、ユーザーが給料を選択しないようにすることです(例えば2500ユーロ) 私のノーライダーにセレクターを1つだけ表示し、ダブルセレクター(レンジセレクター)を表示することはできません。 また、私のデータは€(ユーロ)であり、私は(スペースで€記号と数千人)私のオプションの作業を取得するために管理していないNouisliderにスライドを1つだけ表示する

ここでは私のコードです:

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

ありがとうございましたあなたの助けに。

よろしくお願いいたします。

答えて

0

まず:7000個のオプション要素が遅くなります作成

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

はこれをしません。

2つではなく1つのハンドルを作成するには、start: [ 1000, 1000 ]の代わりにstart: 1000を使用します。

+0

私が変更した場合はバーがロードされません: \t開始:[1000、1000年]、 \t に開始:1000、 私は別の方法でこれを行うことができますどのように7000個のオプション要素については? ありがとう – Ddc

関連する問題