Data Entryduskmoonimplemented11 demos

Slider

Slider captures a value or range on a continuous scale.

Import@duskmoon-dev/components/slider

11API sections

22documented props

8behavior scenarios

Key API

valuedefaultValueonChangeonAfterChangeminmax

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Slider is most often configured through `value`, `defaultValue`, `onChange`, `onAfterChange`.

Covered behavior

Renders with default DuskMoon classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

primary

secondary

tertiary

accent

neutral

base

info

success

warning

error

Colors

authored

Slider supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function SliderColorsDemo() {
  return (<div style={{ display: "grid", gap: 14 }}>
  {colors.map((color) => (
    <Slider key={color} color={color} defaultValue={64} tooltip={{ open: true }} />
  ))}
</div>);
}

Preview

Basic usage

authored

Import the component stylesheet and Slider from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function Example() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Renders with default DuskMoon classes

test-backed

Slider scenario from the component test coverage: renders with default duskmoon classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderRendersWithDefaultDuskMoonDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Uses defaultValue for fill and thumb position

test-backed

Slider scenario from the component test coverage: uses defaultvalue for fill and thumb position.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderUsesDefaultValueForFillDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Renders range values with two thumbs

test-backed

Slider scenario from the component test coverage: renders range values with two thumbs.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderRendersRangeValuesWithDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Calls onChange and onAfterChange with changed scalar value

test-backed

Slider scenario from the component test coverage: calls onchange and onafterchange with changed scalar value.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderCallsOnChangeAndOnAfterChangeDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Applies disabled and vertical classes

test-backed

Slider scenario from the component test coverage: applies disabled and vertical classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderAppliesDisabledAndVerticalDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Passes min and max to range inputs

test-backed

Slider scenario from the component test coverage: passes min and max to range inputs.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderPassesMinAndMaxDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Renders marks and active mark classes

test-backed

Slider scenario from the component test coverage: renders marks and active mark classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderRendersMarksAndActiveDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Applies custom className

test-backed

Slider scenario from the component test coverage: applies custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Slider } from "@duskmoon-dev/components/slider";

export function SliderAppliesCustomClassNameDemo() {
  return (<Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>
</div>

<div data-theme="moonlight">
  <Slider
  defaultValue={48}
  marks={{ 0: "0", 50: "50", 100: "100" }}
  tooltip={{ open: true }}
  color="secondary"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Slider. Start with `value`, `defaultValue`, `onChange`, `onAfterChange` for common usage.

Types: packages/components/src/components/slider/Slider.types.tsScenarios: packages/components/src/components/slider/Slider.test.tsx

SliderPropsinterface extends Omit< ComponentProps<"div">, "children" | "color" | "defaultValue" | "onChange" >

Prop	Type	Required	Description
`value`	`SliderValue`	No	value configures Slider.
`defaultValue`	`SliderValue`	No	defaultValue configures Slider.
`onChange`	`(value: SliderValue) => void`	No	onChange configures Slider.
`onAfterChange`	`(value: SliderValue) => void`	No	onAfterChange configures Slider.
`min`	`number`	No	min configures Slider.
`max`	`number`	No	max configures Slider.
`step`	`number \| null`	No	step configures Slider.
`range`	`boolean \| SliderRangeConfig`	No	range configures Slider.
`disabled`	`boolean`	No	disabled configures Slider.
`vertical`	`boolean`	No	vertical configures Slider.
`marks`	`SliderMarks`	No	marks configures Slider.
`tooltip`	`SliderTooltip`	No	tooltip configures Slider.
`reverse`	`boolean`	No	reverse configures Slider.
`size`	`SliderSize`	No	size configures Slider.
`color`	`SliderColor`	No	color configures Slider.
`onInputKeyDown`	`(event: KeyboardEvent<HTMLInputElement>) => void`	No	onInputKeyDown configures Slider.

SliderMarkConfiginterface

Prop	Type	Required	Description
`label`	`ReactNode`	No	label configures Slider.
`style`	`CSSProperties`	No	style configures Slider.
`className`	`string`	No	className configures Slider.

SliderTooltipConfiginterface

Prop	Type	Required	Description
`open`	`boolean`	No	open configures Slider.
`formatter`	`SliderTooltipFormatter \| null`	No	formatter configures Slider.

SliderRangeConfiginterface

Prop	Type	Required	Description
`draggableTrack`	`boolean`	No	draggableTrack configures Slider.

SliderValuetype

number | [number, number]

SliderSizetype

"sm" | "md" | "lg"

SliderColortype

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

SliderMarktype

ReactNode | SliderMarkConfig

SliderMarkstype

Record<number, SliderMark>

SliderTooltipFormattertype

(value: number) => ReactNode

SliderTooltiptype

boolean | SliderTooltipFormatter | SliderTooltipConfig