Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a slider.
Available options: accent, alert, brand, info, success
Default
50
Accent
50
Brand
50
Alert
50
Info
50
Success
50
<.slider class="slider" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Default</:label>
</.slider>
<.slider class="slider ui-accent" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Accent</:label>
</.slider>
<.slider class="slider ui-brand" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Brand</:label>
</.slider>
<.slider class="slider ui-alert" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Alert</:label>
</.slider>
<.slider class="slider ui-info" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Info</:label>
</.slider>
<.slider class="slider ui-success" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Success</:label>
</.slider>
Size
Use class="ui-size-{size}" to set the size of a slider.
Available options: xs, sm, md (default), lg, xl
SM
50
MD
50
LG
50
XL
50
<.slider class="slider ui-size-sm" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>SM</:label>
</.slider>
<.slider class="slider ui-size-md" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>MD</:label>
</.slider>
<.slider class="slider ui-size-lg" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>LG</:label>
</.slider>
<.slider class="slider ui-size-xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>XL</:label>
</.slider>
Max width
Without max-w-*, width comes from component CSS. Default for slider: 3xs (width: 100%).
Use class="max-w-{step}" to set the maximum width of a slider root.
Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs (default), 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (3xs)
50
none
50
full
50
9xs
50
8xs
50
7xs
50
6xs
50
5xs
50
4xs
50
3xs
50
2xs
50
xs
50
sm
50
md
50
lg
50
xl
50
2xl
50
3xl
50
4xl
50
5xl
50
6xl
50
7xl
50
8xl
50
9xl
50
<.slider class="slider" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-none" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-full" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-9xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-8xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-7xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-6xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-5xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-4xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-3xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-2xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-xs" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-sm" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-md" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-lg" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-2xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-3xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-4xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-5xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-6xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-7xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-8xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
<.slider class="slider max-w-9xl" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} />
States
Disabled
50
Read only
50
Invalid
50
<.slider class="slider" value={50.0} disabled markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Disabled</:label>
</.slider>
<.slider class="slider" value={50.0} read_only markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Read only</:label>
</.slider>
<.slider class="slider" value={50.0} invalid markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Invalid</:label>
</.slider>
Markers
Markers
50
No markers
50
<.slider class="slider" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
<:label>Markers</:label>
</.slider>
<.slider class="slider" value={50.0}>
<:label>No markers</:label>
</.slider>