I'd like to duplicate input range, in other words, I want them to have the same css attributes and have the same JS except for the options. I want the first input range to go from 10 to 200 and the second one to go from 10 to 100.
Here's the 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>
And the here is the 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>
Don't mind the code properties or names, it's not mine. Thank you for your answers!