Skip to content
DOL Studio

Slider

Design: Stable Code: Coded formrange 7 Figma sets 3 standalone .Slider/Item/Mark

Live preview

Default — with value tooltip

050100
Interactive · showing value tooltip on drag

Tones

brand
info
success
warning
danger

Sizes

sm
md
lg

With marks

0
25
50
75
100
Slider with step marks and labels

Custom format — currency

Interactive · custom step, range boundaries, and currency formatter

Disabled

Disabled state · value fixed, slider dragging locked

Import & files

Import
import { Slider } from "@dol/ui/slider";
Source file
packages/@dol/ui/src/slider/Slider.tsx

Figma source

Figma source 7 sets
Page
Slider
Sets
7 + 3 standalone
Primary set
.Slider/Item/Mark · 6 variants Open in Figma →
Showing: .Slider/Item/Mark
6 other sets
  • .Slider/Item/Handle 4 variants Figma →
  • .Slider/Item/milestone 5 variants Figma →
  • .Slider/Item/Rail 3 variants Figma →
  • .Slider/Item/Track 3 variants Figma →
  • Slider/Group/Basic 4 variants Figma →
  • Slider/Group/Milestone 5 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Slider
Slug: `slider`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Range slider - handle, mark, rail primitives.


## Import
```ts
import { Slider } from "@dol/ui/slider";
```
Source: `packages/@dol/ui/src/slider/Slider.tsx`


## Figma source
Page: Slider
Sets: 7
Primary: .Slider/Item/Mark
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=2991-16503

Related

  • DatePicker

    Coded

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded
  • Label

    Checkbox

    Coded
  • Active

    Chip

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).