Skip to content
Pelatform UI

Data input

Slider

A native range input on a styled track, with one thumb for a value or two for a range.

Class nameTypeDescription
rangeplf:rangeComponentA native range input
range-fieldplf:range-fieldPartHolds the range inputs on one track
range-outputplf:range-outputPartShows a value

Default

The script snaps values to step and shows each <output>, authored hidden, with the value of the range input its for names; units such as % stay in your markup.

%

Minimum 0; maximum 100; step 1.

Step

A decimal step works like a whole number; step="any" is not supported.

Minimum 0; maximum 1; step 0.05.

Range

Give both inputs the same min, max and step, the lower value first.

Temperature range

Minimum -1; maximum 1; step 0.1.

Exact values

A number field inside the slider follows the thumb of its order, and a typed value moves that thumb.

Monthly budget

Both ends stay ordered.

Disabled

In a range, disable one input to lock that end; aria-disabled="true" looks like disabled and blocks changes, but keeps the value in the form.

This setting is unavailable.

Locked range

This setting is unavailable.

Invalid

The slider does not validate values: set aria-invalid="true" from your own checks.

Choose a value from the allowed range.

JavaScript

Slider needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<script src="pelatform-ui.min.js" defer></script>
<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

Hooks

Attribute Purpose
data-plf-slider Marks the container; the script adds data-plf-slider-enhanced
<output for="…"> Optional, authored hidden: shows the value of the range input its for names; the script shows it with aria-live="off" unless you set one
<input type="number"> Optional, one per thumb in the slider: follows the thumb of its order, and a typed value moves that thumb, snapped to the step. The script copies min, max and step when the field has none
aria-valuemin, aria-valuemax Set by the script in a range, following the other value, so the thumbs cannot pass each other

Methods

Method Behavior
PLF.Slider.getOrCreateInstance(element) Returns the instance, creating it for valid markup; invalid markup logs an error, and the native inputs keep working
PLF.Slider.getInstance(element) Returns the instance or null
instance.getValues() Returns an array of one or two values
instance.getState() Returns {values, min, max, step, disabled}, with one disabled boolean per input
instance.setValues(values) Sets every value at once, snapped to the step; returns false when unchanged, out of order, canceled or touching a disabled input; fires no native events
instance.focus(index) Focuses the input at index, 0 by default
instance.destroy() Removes listeners and restores the attributes and outputs it set; values stay. Destroy and initialize again to change min, max, step or the inputs

With ESM, import Slider from @pelatform/ui/components/slider.

After setting an input’s .value in code, fire its input or change event so the slider follows.

Events

Event When
plf:slider:before-change Before a new value is accepted; cancelable
plf:slider:change After the inputs and outputs show the new value

Each event’s detail:

Property Value
instance The Slider instance
reason api, trigger for the native input or pointer for the track
trigger The range input or number field, or null from a method
previousState The state before the change, shaped like getState()
state The new state, shaped like getState()

Events bubble from the container. Initialization, reset and destroy() send no events.

Keyboard

Key Action
Tab, Shift+Tab Move between thumbs, lower first, whatever their values
Arrow keys, Page Up, Page Down, Home, End The browser’s own range keys; in a range they stop at the other thumb. In right-to-left layouts the scale runs from the right
Click or drag on the track Moves the nearest thumb, with native input events and one change on release

React

Slider from @pelatform/react renders this markup with its label, value and help, and moves its thumbs as the script does: snapped to step, in order, and from the track and the number fields. It brings its own label, help and error, so it goes outside a Field.

Prop Values Default
label The slider’s name, beside its value; with two thumbs, the group’s Required
value A number, or [min, max] for two thumbs, which the application changes in onValueChange Its own state
defaultValue The value it starts with when the application does not set value, which a form’s reset brings back The middle of min and max
onValueChange (value), called with the new value, shaped as value, when a thumb moves None
min, max, step Numbers, on each range input 0, 100, 1
name The range input’s name, or two names for two thumbs None
help Help text after the slider, which describes each range input None
error An error message after the help, which also makes each range input invalid None
disabled true disables the range inputs and the number fields false
aria-disabled true looks like disabled and blocks changes, but keeps the values in the form None
thumbLabels The two thumbs’ names, in visually hidden labels The label with minimum and maximum
numberLabels One label per thumb, each adding a number field under the track that follows its thumb None

Children follow the value, such as a unit. The other props are the container div’s, className and ref included.

CSS variables

Override these variables on a root, a slider or its control, not on one input alone.

Variable Default
--plf-slider-track-height --plf-space-1, 0.25rem (4px)
--plf-slider-thumb-size --plf-space-4, 1rem (16px)
--plf-slider-control-height --plf-control-height-md, 2.25rem (36px)
--plf-slider-track-bg --plf-color-input
--plf-slider-fill-bg --plf-color-primary; danger on an invalid input
--plf-slider-thumb-bg --plf-color-surface
--plf-slider-thumb-border The fill color
--plf-slider-thumb-shadow --plf-shadow-xs
--plf-slider-focus-color --plf-focus-color

Sliders are horizontal with one or two thumbs; vertical sliders, marks and tooltips are not included.

Built with Pelatform UIv0.1.0

Components

Getting started

Foundations

Components

Actions

Data display

Navigation

Feedback

Data input

Layout

Advanced

Integrations

Blocks

Application

Authentication

Icons