#Slider

Slider adjusts an approximate value within a bounded range. Use it when users can perceive the result immediately and relative position matters more than typing an exact number.

npm install @a3s-lab/ui@0.4.0

<div class="field">
  <div class="flex items-center justify-between gap-2">
    <label for="temperature">Temperature</label>
    <output for="temperature">20 °C</output>
  </div>
  <input
    class="input w-full"
    type="range"
    id="temperature"
    name="temperature"
    min="10"
    max="30"
    step="1"
    value="20"
    aria-valuetext="20 degrees Celsius"
  />
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Import Tailwind and the complete A3S style bundle:

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Use a native range input with a visible label. Include the Range runtime so the visual fill stays synchronized with the native value.

<div class="field">
  <div class="flex items-center justify-between gap-2">
    <label for="temperature">Temperature</label>
    <output for="temperature">20 °C</output>
  </div>
  <input
    class="input w-full"
    type="range"
    id="temperature"
    name="temperature"
    min="10"
    max="30"
    step="1"
    value="20"
    aria-valuetext="20 degrees Celsius"
  />
</div>

For component-level loading, import base styles, Range structure, the A3S visual style, the runtime, and Range controller. See Installation for CDN and other integrations.

@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/range.css";
@import "@a3s-lab/ui/styles/a3s.css";

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/range.min.js" defer></script>

#Parameters

#Product decisions

Choose Slider only when all of these are true:

• The range has meaningful minimum and maximum values.
• Users can see or otherwise perceive the result while adjusting it.
• Approximate selection or a small, predictable step is acceptable.
• The current value and unit can be communicated next to the control.

Use a numeric field instead when users must enter an exact value, compare several precise values, or work with an unbounded range. When both fast adjustment and exact entry matter, compose Slider with a synchronized numeric field and keep one shared value model.

#States and variants

#Standalone

A standalone slider still needs an accessible name. It is appropriate inside a surface that already exposes the current value visually, such as a media player.

<SliderDemo id="slider-standalone" />

#Label and live value

Keep the label at the start and the live value at the end of the same row. Include units in visible output and aria-valuetext when the raw number is ambiguous.

<SliderDemo id="slider-labeled" variant="labeled" />

#Form field

When Slider belongs to a form, explain the consequence or limit and associate it with aria-describedby. The native value remains the submitted value; formatted output is presentation.

<SliderDemo id="slider-field" variant="field" />

#Disabled

Disabled controls keep their value visible. Put the reason next to the field so the muted appearance is not the only explanation.

<div class="field" data-disabled>
    <SliderDemo id="slider-disabled" variant="labeled" disabled />
    <p>This limit is managed by the workspace policy.</p>
  </div>

#RTL

Set dir="rtl" on the input or an ancestor. The filled track grows from the logical start edge, and native directional keys follow the document direction. The numeric meaning of minimum and maximum does not change.

<SliderDemo id="slider-rtl" direction="rtl" />

#Accessibility

• Give every slider an accessible name through a visible label whenever possible. Use aria-label only when the surrounding interface already makes the purpose visible.
• Declare truthful min, max, and step values. Do not rely on tick marks or spatial position to communicate a hidden scale.
• Show the current value and unit near the track. Add localized aria-valuetext when the raw number needs units, categories, or another human-readable meaning.
• Preserve native keyboard behavior: arrows change one step, Page Up and Page Down make larger changes where supported, and Home and End reach the declared endpoints.
• Do not add easing or delayed animation to pointer dragging; the thumb and visible result must follow input directly.
• Keep the full hit target at least 44px on coarse pointers while the visible track and thumb remain compact.
• Disabled sliders retain a readable value and an adjacent reason. Do not hide a policy or permission constraint behind reduced opacity alone.
• In RTL, use logical direction for visual fill and layout. Test the actual keyboard behavior instead of mirroring only the artwork.