The range input enables the user to choose a percentage setting by sliding the knob.

Example

⌘ Cmd + ⌥ Option + 1

Properties

propertypropTyperequireddefaultdescription
isDisabledbool--Whether it is disabled, will render as greyscale if so *
onChangefunc--onChange function
testSectionstring--Hook for automated JavaScript tests
valuenumber--The value

Usage

Use input range when you need to emphasize a special user input field like 0-100% traffic allocation.

Best Practices

Do

Use for special emphasis of a single input (0-100%)

Don't

Input range is special and shouldn't be used multiple times on a single page

Don't change the range, keep values to 0-100%