Me gustaría duplicar el rango de entrada, en otras palabras, quiero que tengan los mismos atributos css y tengan el mismo JS excepto por las opciones. Quiero que el primer rango de entrada vaya de 10 a 200 y el segundo de 10 a 100.
Aquí está el html:
<!-- First Cursor (Largeur) --> <form class="range"> <div class="form-group range__slider"> <input type="range" step="1"> </div> <div class="form-group range__value"> <label>LARGEUR(cm)</label> <span></span> </div> </form> <!-- Second cursor (Hauteur) --> <form class="range"> <div class="form-group range__slider"> <input type="range" step="1"> </div> <div class="form-group range__value"> <label>HAUTEUR(cm)</label> <span></span> </div> </form>Y aquí está el JS:
<script> class Slider { constructor (rangeElement, valueElement, options) { this.rangeElement = rangeElement this.valueElement = valueElement this.options = options // Attach a listener to "change" event this.rangeElement.addEventListener('input', this.updateSlider.bind(this)) } // Initialize the slider init() { this.rangeElement.setAttribute('min', options.min) this.rangeElement.setAttribute('max', options.max) this.rangeElement.value = options.cur this.updateSlider() } // Format the money asMoney(value) { return parseFloat(value) .toLocaleString('en-US', { maximumFractionDigits: 2 }) } generateBackground(rangeElement) { if (this.rangeElement.value === this.options.min) { return } let percentage = (this.rangeElement.value - this.options.min) / (this.options.max - this.options.min) * 100 return 'background: linear-gradient(to right, #AFCA14, #E7E7E7 ' + percentage + '%, #E7E7E7 ' + percentage + '%, #D3D3D3 100%)' } updateSlider (newValue) { this.valueElement.innerHTML = this.asMoney(this.rangeElement.value) this.rangeElement.style = this.generateBackground(this.rangeElement.value) } } let rangeElement = document.querySelector('.range [type="range"]') let valueElement = document.querySelector('.range .range__value span') let options = { min: 10, max: 200, cur: 25 } if (rangeElement) { let slider = new Slider(rangeElement, valueElement, options) slider.init() } </script>No te preocupes por las propiedades o los nombres del código, no es mío. ¡Gracias por sus respuestas!