stylescape/ts/elements/Slider.ts

Stylescape is a visual identity framework developed by Scape Agency.

// Custom Slider Class
// Sliders are commonly used for selecting values or adjusting settings. A custom slider class can provide specific functionalities and styles beyond the basic HTML slider.

class CustomSlider {
    private slider: HTMLInputElement
    private valueDisplay: HTMLElement

    constructor(sliderId: string, displayId: string) {
        this.slider = document.getElementById(sliderId) as HTMLInputElement
        this.valueDisplay = document.getElementById(displayId) as HTMLElement
        this.slider.addEventListener('input', this.updateDisplay)
        this.updateDisplay()
    }

    private updateDisplay = () => {
        this.valueDisplay.textContent = this.slider.value
    }
}

new CustomSlider('mySlider', 'sliderValueDisplay')