RangeSliders

Default

<div class="rangeSlider default" data-min="0" data-max="100" data-step="1" data-vmin="20" data-vmax="80"></div>

document.querySelectorAll(".default").forEach(el => {
    new RangeSlider(el)
})
        

With .25-Stepping and custom output-formatter

<div class="rangeSlider step-25" data-min="50" data-max="100" data-step=".25" data-vmin="75" data-vmax="90"></div>

document.querySelectorAll(".step-25").forEach(el => {
    new RangeSlider(el,{
        outputFormatter: o => `${o.toFixed(2)} kg`
    })
})
        

With high stepping for large values

<div class="rangeSlider step-lg" data-min="10000" data-max="99000" data-step="2500" data-vmin="45000" data-vmax="60000"></div>

document.querySelectorAll(".step-lg").forEach(el => {
    new RangeSlider(el,{
        outputFormatter: o => `${o/1000} k`
    })
})
        

Without output, using button to alert the min and max values

<div class="rangeSlider no-output" data-min="50" data-max="150" data-step="3" data-vmin="90" data-vmax="120"></div>

document.querySelectorAll(".no-output").forEach(el => {
    const slider = new RangeSlider(el, {
        output: false
    })

    const button = document.createElement("button")
    button.textContent = "Alert slider values"
    button.onclick = () => alert(`Your values are: ${slider.min} and ${slider.max}`)

    el.after(button)
})