Slider

A styled range input for selecting a numeric value between a minimum and maximum. Supports size variants, labels, and exposes input (fires continuously while dragging) and change (fires once on release) events, both carrying the current numeric value in event.detail.value.

Playground

Controls

Size

Disabled

Tooltip

Min

Max

Step

Value

Label

Name

Theme

HTMLReact

ShareCopy

Usage

<lt-slider label="Volume" value="40" min="0" max="100" step="1"></lt-slider>

<!-- Sizes -->

<lt-slider size="sm" label="Small" value="50"></lt-slider>
<lt-slider size="md" label="Medium" value="50"></lt-slider>
<lt-slider size="lg" label="Large" value="50"></lt-slider>

<!-- Show value tooltip -->

<lt-slider label="Volume" value="40" tooltip></lt-slider>

<!-- Disabled -->

<lt-slider label="Disabled" value="60" disabled></lt-slider>

<!-- Listen for events -->

<lt-slider id="vol" label="Volume" value="0"></lt-slider>

<script>
const vol = document.getElementById('vol');
vol.addEventListener('input', (e) => {
  console.log('dragging:', e.detail.value);
});
vol.addEventListener('change', (e) => {
  console.log('committed:', e.detail.value);
});
</script>

import { Slider } from '@latty-ds/react';

function VolumeControl() {
const [volume, setVolume] = useState(40);

return (

<Slider
label="Volume"
value={volume}
min={0}
max={100}
step={1}
onInput={(e) => setVolume(e.detail.value)}
/>
);
}

<script setup>import {ref} from 'vue' const volume = ref(40)</script>

<template>
<lt-slider
  label="Volume"
  :value="volume"
  :min="0"
  :max="100"
  :step="1"
  @input="volume = $event.detail.value"></lt-slider>
</template>

API