formsslider

Slider

Range slider component with single or multiple thumbs and step markers.

Import#

import { Slider } from 'moraine'

Slot Structure#

Track with a fill range and one or more draggable thumb handles.

root
├── track
│   ├── range
│   └── divider (optional ×n)
└── thumb (×n)

Examples#

Controlled Single#

Input phase updates with onValueChange and commit phase updates with onChange.

1
function ControlledSingle() {
2
  const [singleValue, setSingleValue] = createSignal(32)
3
  const [singleCommit, setSingleCommit] = createSignal(32)
4

5
  return (
6
    <div class="max-w-xl space-y-3">
7
      <Slider
8
        value={singleValue()}
9
        min={0}
10
        max={100}
11
        step={1}
12
        onValueChange={setSingleValue}
13
        onChange={setSingleCommit}
14
      />
15
      <p class="text-xs text-muted-foreground">Current value: {singleValue()}</p>
16
      <p class="text-xs text-muted-foreground">Last committed value: {singleCommit()}</p>
17
    </div>
18
  )
19
}

Variants#

Default and bold variants with visual step dividers.

There will be no effective if divider set to true but step does not set.

1
function Variants() {
2
  return (
3
    <div class="w-lg space-y-5">
4
      <div class="space-y-2">
5
        <label class="text-xs text-muted-foreground block uppercase">Default with divider</label>
6
        <Slider divider min={0} max={100} step={10} defaultValue={40} />
7
      </div>
8
      <div class="space-y-2">
9
        <label class="text-xs text-muted-foreground block uppercase">Bold with divider</label>
10
        <Slider divider variant="bold" min={0} max={100} step={10} defaultValue={30} />
11
      </div>
12
    </div>
13
  )
14
}

Sizes#

Track and thumb sizing from xs to xl.

1
function Sizes() {
2
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="flex gap-4 w-full">
6
      <div class="flex flex-(1 col) gap-4">
7
        <For each={SIZES}>
8
          {(size) => (
9
            <div class="space-y-2">
10
              <label class="text-xs text-muted-foreground block uppercase">{size}</label>
11
              <Slider size={size} defaultValue={35} />
12
            </div>
13
          )}
14
        </For>
15
      </div>
16
      <div class="flex flex-(1 col) gap-4">
17
        <For each={SIZES}>
18
          {(size) => (
19
            <div class="space-y-2">
20
              <label class="text-xs text-muted-foreground block uppercase">{size}</label>
21
              <Slider variant="bold" size={size} defaultValue={35} />
22
            </div>
23
          )}
24
        </For>
25
      </div>
26
    </div>
27
  )
28
}

Disabled#

Disabled sliders keep values visible while preventing interaction.

Orientations and Invert#

Horizontal default layout and vertical layout with fixed container height.

1
function Orientations() {
2
  const [horizontalValue, setHorizontalValue] = createSignal(45)
3
  const [verticalValue, setVerticalValue] = createSignal(45)
4
  const [inverted, setInverted] = createSignal(false)
5
  const [isBold, setIsBold] = createSignal(false)
6

7
  return (
8
    <div class="max-w-xl space-y-4">
9
      <Switch label="Invert direction" checked={inverted()} onChange={setInverted} />
10
      <Switch label="Bold variant" checked={isBold()} onChange={setIsBold} />
11
      <div class="gap-8 grid items-start sm:grid-cols-2">
12
        <div class="w-50 space-y-2">
13
          <label class="text-xs text-muted-foreground block">Horizontal: {horizontalValue()}</label>
14
          <Slider
15
            inverted={inverted()}
16
            variant={isBold() ? 'bold' : undefined}
17
            value={horizontalValue()}
18
            onValueChange={setHorizontalValue}
19
          />
20
        </div>
21
        <div class="space-y-2">
22
          <label class="text-xs text-muted-foreground block">Vertical: {verticalValue()}</label>
23
          <div class="flex h-48 items-center">
24
            <Slider
25
              orientation="vertical"
26
              inverted={inverted()}
27
              variant={isBold() ? 'bold' : undefined}
28
              value={verticalValue()}
29
              onValueChange={setVerticalValue}
30
            />
31
          </div>
32
        </div>
33
      </div>
34
    </div>
35
  )
36
}

Range Slider#

Two thumbs with controlled array value, optional minimum gap, and configurable thumb crossing.

1
function RangeSlider() {
2
  const [rangeValue, setRangeValue] = createSignal<number[]>([20, 75])
3
  const [minStepsBetweenThumbs, setMinStepsBetweenThumbs] = createSignal(0)
4
  const [allowThumbCrossing, setAllowThumbCrossing] = createSignal(true)
5

6
  return (
7
    <div class="max-w-xl space-y-3">
8
      <Checkbox
9
        checked={allowThumbCrossing()}
10
        onChange={setAllowThumbCrossing}
11
        label="Allow dragging across overlapping thumbs"
12
      />
13
      <Checkbox
14
        checked={minStepsBetweenThumbs() > 0}
15
        onChange={(isChecked) => setMinStepsBetweenThumbs(isChecked ? 10 : 0)}
16
        label="Min steps between thumbs"
17
      />
18
      <Slider
19
        value={rangeValue()}
20
        min={0}
21
        max={100}
22
        step={1}
23
        minStepsBetweenThumbs={minStepsBetweenThumbs()}
24
        allowThumbCrossing={allowThumbCrossing()}
25
        onValueChange={(next) => {
26
          if (Array.isArray(next)) {
27
            setRangeValue(next)
28
          }
29
        }}
30
      />
31
      <p class="text-xs text-muted-foreground w-50">
32
        Range: {rangeValue()[0]} - {rangeValue()[1]}
33
      </p>
34
      <p class="text-xs text-muted-foreground w-50">
35
        Thumb crossing:{' '}
36
        {allowThumbCrossing() && minStepsBetweenThumbs() === 0 ? 'Enabled' : 'Constrained'}
37
      </p>
38
      <p class="text-xs text-muted-foreground w-50">Min steps between: {minStepsBetweenThumbs()}</p>
39
    </div>
40
  )
41
}

Form Integration#

Submit to validate required minimum value through Form + FormField.

1
function FormIntegration() {
2
  const [formState, setFormState] = createSignal({
3
    volume: 10,
4
  })
5

6
  const updateFormVolume = (nextValue: SliderT.Value) => {
7
    const next = Array.isArray(nextValue) ? (nextValue[0] ?? 0) : nextValue
8
    setFormState((prev) => ({ ...prev, volume: next }))
9
  }
10
  const form = createForm({
11
    schema: v.object({ volume: v.pipe(v.number(), v.minValue(20, 'Volume must be at least 20.')) }),
12
    initialInput: untrack(formState),
13
    validate: 'input',
14
  })
15

16
  return (
17
    <Form of={form}>
18
      <div class="max-w-xl space-y-4">
19
        <FormField name="volume" label="Volume" description="Keep it at least 20.">
20
          <Slider value={formState().volume} onValueChange={updateFormVolume} />
21
        </FormField>
22
        <div class="flex gap-3 items-center">
23
          <Button type="submit" variant="secondary" size="sm">
24
            Validate
25
          </Button>
26
          <p class="text-xs text-muted-foreground">Current volume: {formState().volume}</p>
27
        </div>
28
      </div>
29
    </Form>
30
  )
31
}

API Reference#

Attributes#

Slotroot6 attributes

Slider container that owns track, range, thumbs, and labels.

Data Attributes

Data Attribute	Description
data-disabled	Present when the component or item is disabled.
data-invalid	Present when the field has a validation error.
data-orientation	Stores the rendered orientation.
data-readonly	Present when the field is read-only.
data-required	Present when the field is required.

ARIA Attributes

ARIA Attribute	Description
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
allowThumbCrossing	`boolean \| undefined`	`true`	Whether dragging can continue across another thumb when there is no minimum gap.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`SliderT.Classes \| undefined`	—	—
defaultValue	`TValue \| undefined`	—	The default value of the input (uncontrolled).
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
divider	`boolean \| undefined`	`false`	Whether to show visual step dividers on the track, only applicable when `step` is defined and greater than 0.
id	`string \| undefined`	—	The ID of the input element.
inverted	`boolean \| undefined`	—	—
max	`number \| undefined`	`100`	Maximum value of the slider.
min	`number \| undefined`	`0`	Minimum value of the slider.
minStepsBetweenThumbs	`number \| undefined`	`0`	Minimum steps required between thumbs in a multi-thumb slider.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onChange	`((value: TValue) => void) \| undefined`	—	Callback when the slider selection change is committed.
onValueChange	`((value: TValue) => void) \| undefined`	—	Callback when the slider selection changes during interaction.
orientation	`"horizontal" \| "vertical" \| undefined`	—	—
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
step	`number \| undefined`	—	Step increment between values. When omitted, pointer movement is continuous.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`SliderT.Styles \| undefined`	—	—
value	`TValue \| undefined`	—	The current value of the input (controlled).
variant	`"default" \| "bold" \| undefined`	—	—