Fluid Visual Scaling Component Library

Range

Range of 0-10 4

Range of 0-100 with step of 25 0 %

Range of 0-1 0.42

Markup

<Range min="0" max="10" label="Range of 0-10" />
<Range
  min="0"
  max="100"
  step="25"
  label="Range of 0-100 with step of 25" />
<Range min="0" max="100" value="66" label="Range of 0-100" />

Custom CSS Properties

--range-track-height
--range-track-width
--range-track-background-color
--range-track-border-radius
--range-track-border
--range-thumb-background-color
--range-thumb-border
--range-thumb-height
--range-thumb-width
--range-thumb-border-radius

Props

Title	Value
class	`string`
label	`string`
id	`string`
output	`string`
min	`string`
max	`string`
value	`string`
outputUnit	`string`
step	`string`
name	`string`
density	`"tight" \| "loose"`

Range

Fiddle