search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.67k stars 660 forks source link

dynamically changing min and max values according to a form input #1212

Closed trix1210 closed 2 years ago

trix1210 commented 2 years ago

how do i set the min and max slider ranges based on a form input instead of hardcoding min and max values in the .js code?

noUiSlider.create(priceSlider, { start: [0, 2000], connect: true, step: 50, margin: 150, range: { min: 0, max: 2000, }, tooltips: true, format: wNumb({ decimals: 0, prefix: '£', }), });

leongersen commented 2 years ago

You get the value from the input, then use it.

var inputMin = document.getElementById('inputMin');
var inputMax = document.getElementById('inputMax');

noUiSlider.create(priceSlider, { start: [0, 2000], connect: true, step: 50, margin: 150, range: { min: inputMin.value, max: inputMax.value, }, tooltips: true, format: wNumb({ decimals: 0, prefix: '£', }), });
github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.