Slider

• Introduction
• Basic example
• Native props
  • Keyboard modifier keys
  • Keyboard number entry
• Multi-value
• Customizing tooltips
  • Tooltip visibility
  • Tooltip formating
• Linked number inputs
  • Linked input attributes
• Marks
  • Basic usage
  • With labels
  • Custom marks
  • Snap to marks
• Chart
• Full-featured example
• Props & Attributes
• Sections

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 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.

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.

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.