Range Slider

premium

Range slider with min/max values and configurable step.

Overview

The Range Slider lets users select a numeric value by dragging a handle along a track. Since a slider always has a value, it doesn't support "required" validation — use min/max message validation instead.

Properties

PropertyTypeDefaultDescription
nameString"value"Field name used in form data.
labelString"Value"Label displayed above the slider.
minNumber0Minimum slider value.
maxNumber100Maximum slider value.
stepNumber1Step increment.

Features

  • Uses native <input type="range"> for accessibility
  • Configurable min, max, and step values
  • Custom track and thumb colors
  • No "required" validation (slider always has a value)
  • Min/max message validation support

Tips

Sliders always have a value, so "required" validation is not applicable.
Use min/max messages to guide users to an acceptable range.

Validation

This component uses number validation. See the Validation Guide for details on configuring rules and error messages.

Related components