CODEWITHSUNDEEP
javascriptuislidernouislider
Ddc
Ddc

Reputation: 67

Show only one slide in Nouislider

I'm using Nouislider on my development site in order to let the user select his salary from range. The point is that I would like the user to select his salary ond not a range (for example 2500€) I can not manage to only display one selector and not a double selector (range selector) in my nouislider. In addition, my data is in € (euros) and I don't manage to get my options work (€ sign and thousands with a space)

Here is my code :

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

Thank you for your help.

Best regards.

Upvotes: 0

Views: 613

Answers (1)

Lg102
Lg102

Reputation: 4898

First: don't do this:

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

Creating 7000 option elements will be slow.

To create one handle instead of two, use start: 1000 instead of start: [ 1000, 1000 ].

Upvotes: 1

Related Questions