Slider
An input where the user selects a value from within a given range.
<input
type="range"
class="input w-full"
min="0"
max="100"
value="50"
>Usage
HTML + JavaScript
Use a native <input type="range"> with the input class. Include range.js so Basecoat can keep the filled track in sync with the input value.
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/basecoat.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/range.min.js" defer></script>
<input type="range" class="input w-full" min="0" max="100" value="50" />
HTML structure
<input type="range" class="input">- Native range input styled as a slider. Width utilities such as
w-fullcan be added directly.
Basecoat intentionally uses the native range input. Unlike shadcn/ui's Base UI slider, it does not support multiple thumbs or vertical orientation.
Examples
Default
<input type="range" class="input w-full" min="0" max="100" value="50">Controlled Label
<div class="grid w-full gap-3 max-w-sm">
<div class="flex items-center justify-between gap-2">
<label class="label" for="temperature">Temperature</label>
<output class="text-sm text-muted-foreground" for="temperature">50</output>
</div>
<input
id="temperature"
type="range"
class="input w-full"
min="0"
max="100"
value="50"
oninput="this.previousElementSibling.querySelector('output').value = this.value"
>
</div>Disabled
<input type="range" class="input w-full" min="0" max="100" value="50" disabled>RTL
<div dir="rtl" class="w-full max-w-sm">
<input type="range" class="input w-full" min="0" max="100" value="50">
</div>