Range

Range slider input for selecting numeric values within a specified range

Basic Range

Simple range sliders with different values

Show Code

Range Sizes

Different sizes for various contexts

Show Code

Range Colors

Various color themes

Show Code

Range with Custom Steps

Different step increments and ranges

Show Code

Range with Value Display

Showing current values with the range slider

Show Code

Usage Notes

  • Use appropriate min/max values based on the data range
  • Consider step size for precision - smaller steps for fine control
  • Display current values to provide user feedback
  • Use colors to convey meaning (success for good values, warning for limits)
  • Label ranges clearly to indicate what values represent
  • Consider accessibility by providing keyboard navigation support