Slider

Overview

The slider component allows users to select a numeric value within a defined range by dragging a thumb along a track or using increment/decrement buttons.

The MedKitSlider component provides an intuitive way to capture numeric input within a constrained range. It combines a visual slider track with a draggable thumb, reference numbers for scale orientation, and a numeric input field with increment/decrement buttons for precise value entry. The component supports both horizontal and vertical orientations, making it flexible for different layout needs. It includes built-in validation, error handling, and accessibility features to ensure a robust user experience.

When to use

• Slider should be used for numeric inputs that have a minimum and maximum range
• A good use case is a numeric input that represents a scale

When not to use

• Do not use the slider for numeric inputs that are not constrained to a range.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Slider

On a scale of 0 to 100, what would you rate your health today? 

Worst I can imagine

Best I can image

0

25

50

75

100

Your health today is

out of 100

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Orientation

'horizontal'

'vertical'

horizontal

The orientation of the slider.

 

Label

string

Free text that sits above the slider. e.g. “Overall, where on a scale of 0-100 would you rate your health today?”

 

Min Label

string

Text that sits on the slider at the min side. e.g. “Worst you can imagine”

 

Max Label

string

Text that sits on the slider at the max side. e.g. “Best you can imagine”

 

Min

number

0

Minimum value of the slider.

 

Max

number

100

Required

Maximum value of the slider.

 

Show Reference Numbers

boolean

true

This is to show reference numbers along the range input, this should show min at one end, max at the other, and 3 equally divided and spaced reference numbers in between

Toggle Prop

Summary Label

string

Required

The label to be shown above the number input, e.g. “Your health today is”

 

Required

boolean

false

If the field is required

Toggle Prop

Error

string

Array<string>

Errors to display for the input.

Value 

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Help Text

string

The help text to display for the input.

 

Placeholder

string

The placeholder text to display for the input.

 

Horizontal Slider

On a scale of 0 to 100, what would you rate your health today? 

Worst I can imagine

Best I can image

0

25

50

75

100

Your health today is

out of 100

Vertical Slider

On a scale of 0 to 100, what would you rate your health today? 

Best I can image

100

75

50

25

0

Worst I can imagine

Your health today is

out of 100

Error

On a scale of 0 to 100, what would you rate your health today? 

Worst I can imagine

Best I can image

0

25

50

75

100

Your health today is

This number is too large

out of 100

Min and Max

On a scale of -50 to 50, what would you rate your mood today? 

Worst I can imagine

Best I can image

-50

-25

0

25

50

Your mood score today is