Range slider

The range slider input allows users to select a number from a defined range using a visual slider

Overview

The range slider component is a styled version of FormKit’s range input, supporting native HTML attributes for min, max, and step values.

It allows users to easily adjust a value within a specified range. For more detailed information on configuring and using FormKit’s range slider input, refer to the official FormKit range documentation.

Basic usage

Check out the FormKit documentation in the Foundations section for setup instructions if you’re new to FormKit.

Importing the component

Ensure your application is configured to use the FormKit plugin. You can then include the range slider component in your FormKit schema or as a standalone component.

Example usage

Once registered, use the range slider component like this:

<FormKit
    type="range"
    label="Volume"
    name="volume"
    min="0"
    max="100"
/>

Accessibility

The range slider component follows accessibility best practices, supporting keyboard navigation and aria attributes for screen readers.

Internationalisation

The range slider input supports internationalised labels and help text, making it adaptable for global use.