Bound labels, tick gauge, optional purpose title, and floating value bubble.
Install with the CLI, or copy the component source into your project.
Add tick-slider (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add tick-slider
Duration labels with a formatted value bubble. Scrub to hear the stepped tick sound.
Numeric range from 0 to 100. Scrub the track to update the value in the bubble.
Value near the middle of the track with an hours and minutes bubble.
Disabled track and bubble.
Custom tick count, colors, width, height, radius, and minimum gap. Bars still span the full track.
Show only the start label, only the end label, or neither. Hidden sides fade the tick gauge.
Purpose title via label. header and footer sit outside the shell; shell overlays the track. With header or footer, bubbleSide auto places the bubble on the opposite side.
labelAlign positions the purpose title start, center, or end. Shell start and end flush to the second tick from each end. Wash stays fixed, and ticks under the text stay dimmed.
bubbleSide auto moves the bubble opposite a header purpose label. Explicit bottom places it under the thumb without a purpose label.
Override accent, bubble text, bound label color, and corner radii with appearance props.
The sm size scales the shell, bounds, ticks, thumb, and bubble. Appearance props still apply. Shells under 22rem use the same density automatically.
Single-thumb scrubber with bound labels, an optional purpose title, a tick gauge, and a floating value bubble.
| Prop | Type | Default | Notes |
|---|---|---|---|
| min | number | 0 | Minimum value. |
| max | number | - | Maximum value (required). |
| step | number | 1 | Increment between values. |
| value | number | - | Controlled value. Values outside min to max are snapped to step and clamped for the thumb, ticks, bubble, and aria value. |
| defaultValue | number | min | Uncontrolled initial value. |
| onValueChange | (value: number) => void | - | Called when the value changes. |
| formatValue | (value: number) => string | - | Formats the bubble text and aria valuetext. Defaults to String(value). |
| disabled | boolean | - | Disables pointer and keyboard interaction. |
Edge labels for live range values. Separate from the purpose title.
| Prop | Type | Default | Notes |
|---|---|---|---|
| startLabel | React.ReactNode | - | Content for the start bound. Omit to hide the bound. |
| endLabel | React.ReactNode | - | Content for the end bound. Omit to hide the bound. |
| bounds | "both" | "start" | "end" | "none" | "both" | Which bound labels to show. Hidden sides fade the tick gauge at that end. none hides both labels and fades both ends. |
Optional title for the control. Does not replace startLabel or endLabel.
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | React.ReactNode | - | Purpose title. Placement follows labelPosition. Alignment follows labelAlign. |
| labelPosition | "header" | "footer" | "shell" | "header" | Where the purpose label renders when label is set. header is above the shell. footer is below. shell overlays the track with a soft wash behind the text, and ticks under the label use reduced opacity. |
| labelAlign | "start" | "center" | "end" | - | Horizontal alignment of the purpose label. start pins left, center centers, end pins right. Defaults to start for header and footer, and center for shell. On shell, start and end flush the copy to the second tick from each end. Shell labels keep a fixed wash, and ticks under the label stay dimmed while the thumb moves. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| showValueBubble | boolean | true | Show the floating value bubble. Side follows bubbleSide. Clearance padding is removed when false. |
| bubbleSide | "auto" | "top" | "bottom" | "auto" | Side of the thumb for the value bubble. auto places the bubble opposite a header or footer purpose label, and above the thumb for a shell label or when label is omitted. top and bottom override auto. |
| bubbleLeading | React.ReactNode | - | Optional leading content inside the value bubble. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| tickCount | number | 22 | Number of vertical tick bars across the track (minimum 2). |
| showTicks | boolean | true | Show the vertical tick bars. |
| tickActive | string | - | Fill color for ticks at or left of the current value. Prefer a kit color token. |
| tickMuted | string | - | Fill color for ticks right of the current value. Prefer a kit color token. |
| tickWidth | string | - | Tick bar width. Prefer a kit length token such as var(--border-width-thick). |
| tickHeight | string | - | Tick bar height. Prefer a kit length token such as calc(6 * var(--spacing-unit)). |
| tickRadius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "full" | Corner radius of each tick bar. |
| tickGap | string | - | Minimum gap between tick bars. Ticks still span the full track from start to end. |
| renderTick | (tick: { index: number; count: number; active: boolean; ratio: number; value: number }) => React.ReactNode | - | Replace each default tick bar with custom content. |
| tickSound | boolean | true | Play a short tick on each stepped value change while scrubbing or using the keyboard. Skipped when the document is hidden or reduced motion is preferred. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | "sm" | "md" | "md" | Overall density. sm is compact for shell, bounds, ticks, thumb, bubble, and bubble clearance. Containers under 22rem apply the same density automatically. Appearance props and CSS variables still override. |
| accent | string | - | Accent fill for the thumb and value bubble. Prefer a kit color token. |
| accentForeground | string | - | Text color on the value bubble. Prefer a kit color token. |
| boundForeground | string | - | Text color on the bound labels. Prefer a kit color token. |
| thumbWidth | string | - | Accent thumb width. Prefer a kit length token such as var(--border-width-thick). |
| thumbHeight | string | - | Accent thumb height. Prefer a kit length token. Overrides the sm density thumb height when set. |
| radius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "full" | Corner radius of the outer shell. |
| boundRadius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "full" | Corner radius of the bound labels. |
| thumbRadius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "full" | Corner radius of the accent thumb. |
| bubbleRadius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "full" | Corner radius of the floating value bubble. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| aria-label | string | - | Accessible name on the slider thumb. Prefer label when a purpose title is visible. |
| aria-labelledby | string | - | ID of a labeling element for the slider thumb. When label is set and this is omitted, the purpose label id is used. |
| className | string | - | Class names on the host wrapper. Use for width and outer layout. |
| style | React.CSSProperties | - | Inline styles on the control root. Can override TickSlider CSS variables. |
Appearance props map onto these CSS variables. The sm size and shells under 22rem remap base variables to the sm companion tokens. Prop and style overrides still win.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-tick-slider-accent | CSS color | var(--df-coral-430) | Active thumb tick and value bubble. |
| --df-tick-slider-accent-foreground | CSS color | var(--df-neutral-0) | Bubble text and leading content. |
| --df-tick-slider-shell-bg | CSS color | color-mix(in oklch, var(--muted) 88%, var(--background)) | Shell background. |
| --df-tick-slider-shell-border | CSS color | var(--border) | Shell border. |
| --df-tick-slider-shell-radius | CSS length | var(--radius-full) | Outer shell corner radius. |
| --df-tick-slider-shell-height | CSS length | calc(14 * var(--spacing-unit)) | Minimum shell height. |
| --df-tick-slider-shell-pad | CSS length | calc(1.5 * var(--spacing-unit)) | Shell padding around bounds and track. |
| --df-tick-slider-gap | CSS length | calc(2 * var(--spacing-unit)) | Gap between bound labels and the track. |
| --df-tick-slider-bound-bg | CSS color | color-mix(in oklch, var(--background) 72%, transparent) | Bound label fill. |
| --df-tick-slider-bound-border | CSS color | var(--border) | Bound label border. |
| --df-tick-slider-bound-foreground | CSS color | var(--foreground) | Bound label text. |
| --df-tick-slider-bound-radius | CSS length | var(--radius-full) | Bound label corner radius. |
| --df-tick-slider-bound-min-width | CSS length | calc(18 * var(--spacing-unit)) | Minimum width of each bound label. |
| --df-tick-slider-bound-pad-inline | CSS length | calc(3 * var(--spacing-unit)) | Horizontal padding inside each bound label. |
| --df-tick-slider-bound-pad-block | CSS length | calc(1.5 * var(--spacing-unit)) | Vertical padding inside each bound label. |
| --df-tick-slider-tick-active | CSS color | var(--foreground) | Ticks at or left of the current value. |
| --df-tick-slider-tick-muted | CSS color | color-mix(in oklch, var(--foreground) 22%, transparent) | Ticks right of the current value. |
| --df-tick-slider-tick-width | CSS length | var(--border-width-hairline) | Tick bar width. |
| --df-tick-slider-tick-height | CSS length | calc(5 * var(--spacing-unit)) | Tick bar height. |
| --df-tick-slider-tick-radius | CSS length | var(--radius-full) | Tick bar corner radius. |
| --df-tick-slider-tick-gap | CSS length | calc(1 * var(--spacing-unit)) | Minimum gap between tick bars when tickGap is set. |
| --df-tick-slider-thumb-width | CSS length | var(--border-width-thick) | Accent thumb width. |
| --df-tick-slider-thumb-height | CSS length | calc(6 * var(--spacing-unit)) | Accent thumb height. |
| --df-tick-slider-thumb-radius | CSS length | var(--radius-full) | Accent thumb corner radius. |
| --df-tick-slider-bubble-pad-inline | CSS length | calc(2.5 * var(--spacing-unit)) | Horizontal padding inside the value bubble. |
| --df-tick-slider-bubble-pad-block | CSS length | calc(1 * var(--spacing-unit)) | Vertical padding inside the value bubble. |
| --df-tick-slider-bubble-offset | CSS length | calc(2 * var(--spacing-unit)) | Gap between the thumb and the value bubble. |
| --df-tick-slider-bubble-radius | CSS length | var(--radius-full) | Value bubble corner radius. |
| --df-tick-slider-bubble-gap | CSS length | calc(1 * var(--spacing-unit)) | Gap between bubble leading content and the value text. |
| --df-tick-slider-root-pad-top | CSS length | calc(9 * var(--spacing-unit)) | Top clearance when the value bubble sits above the thumb. |
| --df-tick-slider-root-pad-bottom | CSS length | calc(9 * var(--spacing-unit)) | Bottom clearance when the value bubble sits below the thumb. |
| --df-tick-slider-label-gap | CSS length | calc(2 * var(--spacing-unit)) | Gap between an outside purpose label and the shell. |
| --df-tick-slider-shell-label-fg | CSS color | var(--foreground) | Purpose label text when labelPosition is shell. |
| --df-tick-slider-shell-label-size | CSS length | var(--df-text-sm) | Font size for the shell purpose label. |
| --df-tick-slider-shell-label-size-sm | CSS length | var(--df-text-13) | Compact font size for the shell purpose label. |
| --df-tick-slider-shell-label-wash | CSS background-image | radial-gradient(closest-side, color-mix(in srgb, var(--df-tick-slider-shell-bg) 100%, transparent) 0%, color-mix(in srgb, var(--df-tick-slider-shell-bg) 92%, transparent) 42%, color-mix(in srgb, var(--df-tick-slider-shell-bg) 58%, transparent) 72%, transparent 100%) | Fixed radial wash behind the shell purpose label text. Opacity does not change with the thumb. |
| --df-tick-slider-shell-label-tick-opacity | number 0 to 1 | 0.28 | Opacity for ticks that sit under the shell purpose label. |
| --df-tick-slider-tick-segments | number | tickCount - 1 | Tick gaps across the track (tickCount minus 1). Used so shell start and end labels inset by one tick to the second mark from each end. |
| --df-tick-slider-shell-label-pad-inline | CSS length | calc(6 * var(--spacing-unit)) | Horizontal wash padding on the shell purpose label capsule. On shell start and end, the outer edge also insets by one tick segment so copy meets the second tick from that end. |
| --df-tick-slider-shell-label-pad-block | CSS length | calc(2.5 * var(--spacing-unit)) | Vertical padding of the shell purpose label wash capsule. |
| --df-tick-slider-fade-size | CSS length | calc(6 * var(--spacing-unit)) | Edge fade length when a bound label is hidden. |
| --df-tick-slider-shell-height-sm | CSS length | calc(11 * var(--spacing-unit)) | Compact shell height for size sm. |
| --df-tick-slider-shell-pad-sm | CSS length | calc(1 * var(--spacing-unit)) | Compact shell padding for size sm. |
| --df-tick-slider-gap-sm | CSS length | calc(1 * var(--spacing-unit)) | Compact bound to track gap for size sm. |
| --df-tick-slider-bound-min-width-sm | CSS length | calc(14 * var(--spacing-unit)) | Compact bound minimum width for size sm. |
| --df-tick-slider-bound-pad-inline-sm | CSS length | calc(3 * var(--spacing-unit)) | Compact bound horizontal padding for size sm. |
| --df-tick-slider-bound-pad-block-sm | CSS length | calc(1 * var(--spacing-unit)) | Compact bound vertical padding for size sm. |
| --df-tick-slider-tick-height-sm | CSS length | calc(3.5 * var(--spacing-unit)) | Compact tick bar height for size sm. |
| --df-tick-slider-thumb-height-sm | CSS length | calc(4.5 * var(--spacing-unit)) | Compact accent thumb height for size sm. |
| --df-tick-slider-bubble-pad-inline-sm | CSS length | calc(2 * var(--spacing-unit)) | Compact bubble horizontal padding for size sm. |
| --df-tick-slider-bubble-pad-block-sm | CSS length | calc(0.5 * var(--spacing-unit)) | Compact bubble vertical padding for size sm. |
| --df-tick-slider-bubble-offset-sm | CSS length | calc(1.5 * var(--spacing-unit)) | Compact bubble offset for size sm. |
| --df-tick-slider-root-pad-top-sm | CSS length | calc(7 * var(--spacing-unit)) | Compact top clearance for size sm. |
| --df-tick-slider-root-pad-bottom-sm | CSS length | calc(7 * var(--spacing-unit)) | Compact bottom clearance for size sm. |
| --df-tick-slider-fade-size-sm | CSS length | calc(4 * var(--spacing-unit)) | Compact edge fade length for size sm. |
| --spacing-unit | CSS length | 0.25rem | Base unit for shell, tick, and bubble sizes. |