Dm DuskMoon React
Standard duskmoon implemented 11 demos

Slider

Slider captures a value or range on a continuous scale.

Import @duskmoon-dev/components/slider
11 API sections
22 documented props
8 behavior 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

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The 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
64
secondary
64
tertiary
64
accent
64
neutral
64
base
64
info
64
success
64
warning
64
error
64

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
48

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
48

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
48

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
48

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
48

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
48

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
48

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
48

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
48

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
48
Moonlight Theme
48

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.ts Scenarios: packages/components/src/components/slider/Slider.test.tsx
SliderProps interface 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.
SliderMarkConfig interface
Prop Type Required Description
label ReactNode No label configures Slider.
style CSSProperties No style configures Slider.
className string No className configures Slider.
SliderTooltipConfig interface
Prop Type Required Description
open boolean No open configures Slider.
formatter SliderTooltipFormatter | null No formatter configures Slider.
SliderRangeConfig interface
Prop Type Required Description
draggableTrack boolean No draggableTrack configures Slider.
SliderValue type 
number | [number, number]
SliderSize type 
"sm" | "md" | "lg"
SliderColor type 
| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"
SliderMark type 
ReactNode | SliderMarkConfig
SliderMarks type 
Record<number, SliderMark>
SliderTooltipFormatter type 
(value: number) => ReactNode
SliderTooltip type 
| boolean | SliderTooltipFormatter | SliderTooltipConfig