Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

333
Views
How can I duplicate an input range - and edit the values in them to have different min and max (values)

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!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!