Documentation Playground
Skip to content
Docs

Slider

Provides user selection from a range of values. 
<.slider id="slider-hero" default_value={[50]} />

API Reference

This component wraps the Slider primitive and supports common margin props. Use default_value for uncontrolled sliders and value for controlled state.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
default_value list ~c"2" Initial value array. Can be [value] for single or [min, max] for range.
disabled boolean false Whether the slider is disabled.
high_contrast boolean — Whether to increase color contrast with the background.
id string nil
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
max integer 100 Maximum value.
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
min integer 0 Minimum value.
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
name string nil Form name attribute.
on_value_change string nil LiveView event when value changes.
orientation string "horizontal" Slider orientation. One of 'horizontal' or 'vertical'.
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size string "2" Slider size from 1 to 3. Controls overall dimensions and thumb size.
step integer 1 Step increment.
style string ""
value list nil Controlled value array. Can be [value] for single or [min, max] for range.
variant string "surface" Visual style variant. One of 'surface', 'classic', or 'soft'.
class Additional CSS classes to add to the element.
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
default_value Initial value array. Can be [value] for single or [min, max] for range.
Type list Default ~c"2"
disabled Whether the slider is disabled.
Type boolean Default false
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
id
Type string Default nil
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
max Maximum value.
Type integer Default 100
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
min Minimum value.
Type integer Default 0
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
name Form name attribute.
Type string Default nil
on_value_change LiveView event when value changes.
Type string Default nil
orientation Slider orientation. One of 'horizontal' or 'vertical'.
Type string Default "horizontal"
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size Slider size from 1 to 3. Controls overall dimensions and thumb size.
Type string Default "2"
step Step increment.
Type integer Default 1
style
Type string Default ""
value Controlled value array. Can be [value] for single or [min, max] for range.
Type list Default nil
variant Visual style variant. One of 'surface', 'classic', or 'soft'.
Type string Default "surface"

Examples

Size

Use the size prop to control the size.

<.flex direction="column" gap="4" max_width="300px">
  <.slider id="slider-size-1" default_value={[25]} size="1" /><.slider
    id="slider-size-2"
    default_value={[50]}
    size="2"
  /><.slider id="slider-size-3" default_value={[75]} size="3" />
</.flex>

Variant

Use the variant prop to control the visual style.

<.flex direction="column" gap="4" max_width="300px">
  <.slider id="slider-variant-surface" default_value={[25]} variant="surface" /><.slider
    id="slider-variant-classic"
    default_value={[50]}
    variant="classic"
  /><.slider id="slider-variant-soft" default_value={[75]} variant="soft" />
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex direction="column" gap="4" max_width="300px">
  <.slider id="slider-color-indigo" default_value={[20]} color="indigo" /><.slider
    id="slider-color-cyan"
    default_value={[40]}
    color="cyan"
  /><.slider id="slider-color-orange" default_value={[60]} color="orange" /><.slider
    id="slider-color-crimson"
    default_value={[80]}
    color="crimson"
  />
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast in light mode.

<.grid columns="2" gap="4">
  <.slider id="slider-hc-indigo" default_value={[10]} color="indigo" /><.slider
    id="slider-hc-indigo-contrast"
    default_value={[10]}
    color="indigo"
    high_contrast
  /><.slider id="slider-hc-cyan" default_value={[30]} color="cyan" /><.slider
    id="slider-hc-cyan-contrast"
    default_value={[30]}
    color="cyan"
    high_contrast
  /><.slider id="slider-hc-orange" default_value={[50]} color="orange" /><.slider
    id="slider-hc-orange-contrast"
    default_value={[50]}
    color="orange"
    high_contrast
  /><.slider id="slider-hc-crimson" default_value={[70]} color="crimson" /><.slider
    id="slider-hc-crimson-contrast"
    default_value={[70]}
    color="crimson"
    high_contrast
  /><.slider id="slider-hc-gray" default_value={[90]} color="gray" /><.slider
    id="slider-hc-gray-contrast"
    default_value={[90]}
    color="gray"
    high_contrast
  />
</.grid>

Radius

Use the radius prop to assign a specific radius value.

<.flex direction="column" gap="4" max_width="300px">
  <.slider id="slider-radius-none" default_value={[25]} radius="none" /><.slider
    id="slider-radius-small"
    default_value={[50]}
    radius="small"
  /><.slider id="slider-radius-full" default_value={[75]} radius="full" />
</.flex>

Range

Provide multiple values to create a range slider.

<.slider id="slider-range" default_value={[25, 75]} />
← Skeleton Spinner →