Slider
Drag slider for single values, ranges and multi-thumbs — native range input for simple cases, <mo-slider> for the rest.
INSTALL
1pnpm dlx @sayagodev/mo add sliderOr import the files from the package (no copy):
1import "@sayagodev/mo/css/slider.css";2import "@sayagodev/mo/js/slider.js";
EXAMPLES
Default (native)
75
1<div class="vstack gap-2">2 <div class="flex items-center justify-between gap-2">3 <label>Volume</label>4 <span class="text-light" data-value>75</span>5 </div>6 <mo-slider min="0" max="100" value="75"></mo-slider>7</div>
Range (2 thumbs)
25 · 75
1<div class="vstack gap-4">2 <div class="flex items-center justify-between gap-2">3 <label>Price range</label>4 <span class="text-light" data-value>25 · 75</span>5 </div>6 <mo-slider min="0" max="100" step="1" value="25,75"></mo-slider>7</div>8
Multiple thumbs
20 · 50 · 80
1<div class="vstack gap-4">2 <div class="flex items-center justify-between gap-2">3 <label>Multiple thumbs</label>4 <span class="text-light" data-value>20 · 50 · 80</span>5 </div>6 <mo-slider min="0" max="100" step="1" value="20,50,80"></mo-slider>7</div>8
Vertical
Vertical
Adjust with arrows or drag
1<div class="hstack gap-8 items-center justify-center" style="height: 16rem">2 <div class="vstack gap-2 items-center">3 <mo-slider orientation="vertical" min="0" max="100" value="50"></mo-slider>4 <small class="text-light" data-value>50</small>5 </div>6 <div class="vstack gap-2 items-center">7 <mo-slider orientation="vertical" min="0" max="100" value="20,80"></mo-slider>8 <small class="text-light" data-value>20 · 80</small>9 </div>10 <div class="vstack gap-2">11 <small class="text-light">Vertical</small>12 <small class="text-light">Adjust with arrows or drag</small>13 </div>14</div>
Controlled
50
slider.value = [75] or listen to input events.
1<div class="vstack gap-4">2 <div class="flex items-center justify-between gap-2">3 <label>Controlled</label>4 <span class="text-light" data-value>50</span>5 </div>6 <mo-slider min="0" max="100" step="1" value="50"></mo-slider>7 <small class="text-light">Set <code>slider.value = [75]</code> or listen to <code>input</code> events.</small>8</div>9
Disabled
1<input type="range" min="0" max="100" value="50" step="1" disabled aria-label="Volume" />2
USAGE
1<mo-slider min="0" max="100" value="50"></mo-slider>2<mo-slider min="0" max="100" value="25,75"></mo-slider> <!-- range -->3<mo-slider orientation="vertical" min="0" max="100" value="50"></mo-slider>4 5<!-- native fallback for single thumb -->6<input type="range" min="0" max="100" value="50" />
API
NAMEKINDDESCRIPTION
<mo-slider>elementRange slider; value is comma-separated, emits input/change
valueattributeComma-separated numbers, e.g. "25,75"
min / max / stepattributeBounds (defaults 0/100/1)
orientationattributehorizontal (default) · vertical
disabledattributeOpacity 0.5, no pointer events
input[type=range]elementNative fallback: full-width track, primary thumb
--mo-range-* / --bar-heighttokenTrack/thumb color hooks
FILES
src/css/slider.csssrc/js/slider.jsInstall:
mo add sliderTHEMING · PLAYGROUND
This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.
Global tokens
--muted-foreground--primary--radius--ringComponent hooks
--mo-slider-thumb-bg--mo-slider-vertical-heightPreview
Your CSS
Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.