Slider

• Introduction
• Basic example
• Native props
  • Keyboard modifier keys
  • Keyboard number entry
• Multi-value
• Customizing handles
• Customizing tooltips
  • Tooltip visibility
  • Tooltip formating
• Linked number inputs
  • Linked input attributes
• Marks
  • Basic usage
  • With labels
  • Custom marks
  • Snap to marks
  • Styling marks
• Scaling slider values
  • Using functions
  • Using Intervals
• Chart
• Full-featured example
• Props & Attributes
• Sections
• Accessibility
  • Keyboard Interactions

Introduction

The slider input is an advanced and highly configurable version of the native HTML range input. Some notable additions compared to the standard range input are:

• Support for multi-value inputs.
• Display tooltips to show selected values.
• Show linked inputs for min and max values.
• Render tick marks for value steps.
• Add arbitrary tick marks.
• Force selection to snap to tick marks.
• Render bar chart data linked to selection values.

Basic example

Native props

if you're familar with using the native HTML range input you'll find than many of the existing props you're familiar with work as expected with the slider input.

Keyboard modifier keys

Even in its simplest form the slider input has a few tricks up its sleeve. Just like the native range input you can use your arrow keys to adjust the input value when it is focused — but with the slider input you can hold the shift key to increment by 10x and your system's modifer key (command or ctrl) to jump to the min / max values.

Keyboard number entry

Whenever you have a handle focused on a slider input you can type a value on your keyboard and after a slight debounce your slider handle will be set to the value you provided — or the closest available match.

Multi-value

To render two value handles on a slider input supply an array as the input's value. Control handles can be dragged through each other and your resulting array value will always be returned sorted in order from smallest to largest.

Customizing handles

Using the maxHandleInner (default) and minHandleInner slots you can customize the appearance of your slider handles. The maxHandleInner slot is used for single-value slider inputs.

Customizing tooltips

Tooltip visibility

By default slider tooltips show on hover and when a selection handle is being dragged. You can force tooltips into an on or off state by using the tooltip prop and providing a boolean value.

Tooltip formating

By providing a function to the tooltip-format prop you can customize the value of your slider tooltip. Your tooltip-format function will be provided two arguments:

value: The current value that would be displayed in the tooltip by default. handle: The current handle being affected by the funciton. Either min or max.

By using the tooltip-format prop you can introduce variety to your slider inputs — especially when combined with FormKit's section-key class prop system.

Linked number inputs

Sometimes a range-style input is more useful for users if they're also able to directly enter numeric values in linked fields. You can reveal number inputs that are bound to the values of the slider range handles by setting the show-input prop to true.

Linked input attributes

The linked number inputs are FormKit inputs. You can apply props to them using the provided props:

• input-attrs: will bind your provided object to both the min and max inputs.
• min-input-attrs: Object to bind to the linked min input.
• max-input-attrs: Object to bind to the linked max input.

Marks

Basic usage

The slider input supports the rendering of marks on the input's track. By setting the marks property to true marks will be rendered at every steps interval.

With labels

You can enable labels for your marks by setting the mark-labels prop to true.

Custom marks

By supplying an array of objects to the marks prop instead of a boolean you can place arbirtary marks on the slider's track. Mark objects shold have the folloing properties:

• at: The position (value) on the track where the mark should render.
• label: The label to render for the mark if the mark-labels prop is enabled.
• class: A string of classes to apply to the mark element.
• labelClasses: A string of classes to apply to the mark label element.

Snap to marks

When supplying custom marks you may want to force the selection to snap to the provided marks. This can be achieved with the snap-to-marks prop. When snap-to-marks is true keyboard events will jump to the next closest mark and entered values through keyboard or linked inputs will snap to the nearest available mark.

Styling marks

You can apply custom classes to your marks and mark labels by using the class and labelClasses properties on your mark objects.

Scaling slider values

By default the slider input scales values linearly across its entire range. However, you can use the provided scaling-function or intervals props to change this behavior.

Using functions

The scaling-function prop accepts 3 values:

• The string linear — this is the default behavior
• The string log which will apply a logarithmic scaling function to your slider
• An object which consits of two functions named forward and reverse which will apply your own scaling logic.

Using Intervals

The intervals prop accepts an array of object where each object defines an interval range on the slider. Each obect contains:

• value: The point on the slider at which the interval begins
• step: The step size that should be used within the interval

Your last interval will cover the range extending from your specified value to the max prop value on your slider. If your lowest interval does not begin at the minimum possible value of your slider then an interval covering the range from your min slider prop to your first interval will be created for you. Its step value will be the value of the step prop on your slider input.

It's important to note that the visual representation of intervals on a slider track is based on the total number of possible steps within a given interval and not the interval's raw numeric value.

Chart

You can render a bar chart above the slider with arbitrary values by suppling an array to the chart prop. The chart array has a similar structure to the marks array. Each nested object should contain:

• at: The position (value) on the track where the bar for the chart should render.
• value: A numeric value that will be used to calculate the relative height of the bar in the chart.

The slider input will iterate over you chart array and determine the largest value contained in the array, and then divide all other values by that largest value to determine the relative heights for rendering the bars of the chart.

Full-featured example

By combining the provided props for the slider component you can create a robust input to cover a variety of usecases. Here is an example for a price-range slider.

Props & Attributes

Sections

You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema, or content (via slots)). Read more about sections here.

Accessibility

All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues here:

Keyboard Interactions