Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
string
"a user friendly label for screen readers"
The color of the track.
string
A hex, name, rgb value, or theme color name.
"control"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
array
An array of objects with a color, value and opacity based on thumb value.
[ { value: 3, color: '#FF0000', opacity: 0.5 }, { value: 7, color: { light: 'accent-3', dark: 'brand' } }, { value: 10, color: '#00FF00' }, ]
Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work.
boolean
true
false
Function that will be called when the user changes the value. It will be passed an event object. The new input value will be available via 'event.target.value'.
function
(event) => {}
At its core, the RangeInput component is a regular <input> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for input elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.
Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.
The border color of the component when in focus.
string
A hex, name, or rgb value.
"focus"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The outline color around the component when in focus.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The shadow color around the component when in focus.
string
"focus"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The color used for rangeInput.track.color.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "rgba(255, 255, 255, 0.33)", light: "rgba(0, 0, 0, 0.33)" }
The color of the thumb on RangeInput when disabled.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The color of the track on RangeInput when disabled.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
Any additional style for the RangeInput.
string
Any CSS.
css`color: 'blue'`
function
(props) => {}
The pad around the RangeInput.
string
T-shirt sizing based off the theme or a specific size in px, em, etc.
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"any CSS size"
object
An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.
{ vertical: "...", horizontal: "...", top: "...", bottom: "...", left: "...", right: "...", start: "...", end: "..." }
The color of the thumb.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
Any additional style for the thumb.
string
Any CSS.
css`color: 'blue'`
function
(props) => {}
The color of the track.
string
A hex, name, or rgb value.
"border"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The color of the lower bound track.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The color of the upper track.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
Any additional style for the track.
string
Any CSS.
css`color: 'blue'`
function
(props) => {}