I have used the NoUiSlider JS plugin on my website which allows the user to use a slider to select a budget, which is great but I want the value they choose to be included as part of a contact/quote form.
I have added a hidden field to the form which I assume the value needs to replace from the NoUiSlider part.
Here is my code, any ideas?
<div id="slider-range"></div>
<div id="budget_value">
£<div id="slider-range-value"></div>
</div>
<input type="text" name="budget" value="" id="budget" class="hid"/>
<script>
var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
start: [ 1500 ],
step: 250,
range: {
'min': [ 0 ],
'max': [ 10000 ]
}
});
var rangeSliderValueElement = document.getElementById('slider-range-value');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle];
});
</script>
Kind regards Liam