Нужно переработать код js под классы

Question

Есть подобная двусторонняя шкала, с полностью рабочим функционалом, но проблема заключается в том, что их должно быть четыре, а это тонна дополнительного кода, понимаю, что на классах это было бы сделать проще, поэтому прошу помощи. Снизу будет код...

let sliderOne = document.getElementById('slider-1')
let sliderTwo = document.getElementById('slider-2')
let displayValOne = document.getElementById('range1')
let displayValTwo = document.getElementById('range2')
let minGap = 100
let sliderTrack = document.querySelector('.slider-track')
let sliderValMax = document.getElementById('slider-1').max

function slideOne() {
  if(parseFloat(sliderTwo.value) - parseFloat(sliderOne.value) <= minGap){
    sliderOne.value = parseFloat(sliderTwo.value) - minGap
  }
  displayValOne.textContent = sliderOne.value + '₽'
  fillColor()
}
function slideTwo() {
  if(parseFloat(sliderTwo.value) - parseFloat(sliderOne.value) <= minGap){
    sliderTwo.value = parseFloat(sliderOne.value) + minGap
  }
  displayValTwo.textContent = sliderTwo.value + '₽'
  fillColor()


}

function fillColor(){
   let percent1 = (sliderOne.value / sliderValMax) * 100
   let percent2 = (sliderTwo.value / sliderValMax) * 100
   sliderTrack.style.background = `linear-gradient(to right, #F5F5F5 ${percent1}% , #08A652 ${percent1}% , #08A652 ${percent2}%, #F5F5F5 ${percent2}%)`
}
sliderOne.addEventListener('input', () => slideOne())
sliderTwo.addEventListener('input', () => slideTwo())
window.onload(slideOne())
window.onload(slideTwo())

.accordion-item-body.--catalog.second
  .values
      span#range1 100₽
      span#range2 1000₽
   .slider-track
      input#slider-1(type="range" min="0" max="1000" value="100")
      input#slider-2(type="range" min="0" max="1000" value="1000")

Answer 1


class Slider {
    constructor(options){
            this.sliderOne = document.getElementById(options.sliderOne)
            this.sliderTwo = document.getElementById(options.sliderTwo)
            this.displayValOne = document.getElementById(options.displayValOne)
            this.displayValTwo = document.getElementById(options.displayValTwo)
            this.minGap = options.minGap
            this.sliderTrack = document.querySelector(options.sliderTrack)
            this.sliderValMax = document.getElementById(options.sliderOne).max
            window.addEventListener('input', () => this.slideOne())
            window.addEventListener('input', () => this.slideTwo())

    }
    slideOne(){
        if(parseFloat(this.sliderTwo.value) - parseFloat(this.sliderOne.value) <= this.minGap){
           return this.sliderOne.value = parseFloat(this.sliderTwo.value) - this.minGap
          }
          this.displayValOne.textContent = this.sliderOne.value + '₽'
          this.fillColor()
    }
    slideTwo(){
        if(parseFloat(this.sliderTwo.value) - parseFloat(this.sliderOne.value) <= this.minGap){
            return  this.sliderTwo.value = parseFloat(this.sliderOne.value) + this.minGap
          }
          this.displayValTwo.textContent = this.sliderTwo.value + '₽'
          this.fillColor()
    }
    fillColor(){
        let percent1 = (this.sliderOne.value / this.sliderValMax) * 100
        let percent2 = (this.sliderTwo.value / this.sliderValMax) * 100
        return  this.sliderTrack.style.background = `linear-gradient(to right, #F5F5F5 ${percent1}% , #08A652 ${percent1}% , #08A652 ${percent2}%, #F5F5F5 ${percent2}%)`
     }
}
const SlOne = new Slider({
    sliderOne: 'slider-1',
    sliderTwo: 'slider-2',
    displayValOne: 'range1',
    displayValTwo: 'range2',
    minGap: 100,
    sliderTrack: '.slider-track',
    sliderValMax: 'slider-1'
})
const SlTwo = new Slider({
    sliderOne: 'slider-1--2',
    sliderTwo: 'slider-2--2',
    displayValOne: 'range1--2',
    displayValTwo: 'range2--2',
    minGap: 100,
    sliderTrack: '.slider-track--2',
    sliderValMax: 'slider-1--2'
})

Всё работает, теперь просто копировать создание нового экземпляра, спасибо за внимание)

БЛОГ НА HUSL

Нужно переработать код js под классы

Ответы (1 шт):