Forms: Sliders - Launchpad

Single slider

Volume

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Volume</label>
    <div class="lp-slider" data-lp-component="slider" data-lp-value="50">
        <div class="lp-slider-track">
            <div class="lp-slider-fill"></div>
            <div class="lp-slider-thumb"></div>
        </div>
    </div>
</div>

Range slider (two handles)

Price range

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Price range</label>
    <div class="lp-slider" data-lp-component="slider" data-lp-range="true" data-lp-min="0" data-lp-max="500">
        <div class="lp-slider-track">
            <div class="lp-slider-fill"></div>
            <div class="lp-slider-thumb"></div>
            <div class="lp-slider-thumb"></div>
        </div>
    </div>
</div>

Custom min / max / step

Temperature (°C, step 5)

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Temperature (°C, step 5)</label>
    <div class="lp-slider" data-lp-component="slider" data-lp-min="-20" data-lp-max="40" data-lp-step="5" data-lp-value="20">
        <div class="lp-slider-track">
            <div class="lp-slider-fill"></div>
            <div class="lp-slider-thumb"></div>
        </div>
    </div>
</div>

Events playground

Listen for lp:slider:change and lp:slider:input.

<p class="lp-text-sm lp-text-muted lp-mb-2">Listen for <code>lp:slider:change</code> and <code>lp:slider:input</code>.</p>
<div class="lp-slider lp-mb-3" id="sl-events" data-lp-component="slider" data-lp-value="25">
    <div class="lp-slider-track">
        <div class="lp-slider-fill"></div>
        <div class="lp-slider-thumb"></div>
    </div>
</div>
<div class="dd-log" id="sl-log" style="max-height:120px;overflow-y:auto;background:var(--lp-surface-hover);border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);padding:8px;font-family:monospace;font-size:12px;"></div>
<script>
(function () {
    const el = document.getElementById("sl-events");
    const log = document.getElementById("sl-log");
    const push = (name, e) => {
        const line = document.createElement("div");
        line.textContent = new Date().toLocaleTimeString() + "  " + name + " → " + JSON.stringify(e.detail.value);
        log.insertBefore(line, log.firstChild);
    };
    el.addEventListener("lp:slider:input", (e) => push("input", e));
    el.addEventListener("lp:slider:change", (e) => push("change", e));
})();
</script>

Events

Event	Fires when	`event.detail`
`lp:slider:input`	Value changes during drag	`{ value }`
`lp:slider:change`	Drag released / final value committed	`{ value }`