Examples
Check out the Usage section for details about how to design a Slider properly, and the different configuration options we provide.
Basic example
You can give a user the means to select a numeric value using sliding a handle across a bar.
<Slider
label="Slider"
secondaryLabel="Choose Value"
/>
Min and max example
You can indicate a minimum and maximum value a user can select using the component.
<Slider
label="Slider"
secondaryLabel="Choose Value"
min={5}
max={10}
/>
Range example
You can add the range property to let a user select a range of values. This adds a second handle for the user to move.
<Slider
label="Select Range"
secondaryLabel="Choose Values"
range
/>
Minimum range example
You can limit the minimum size of the range a user can select. If the user tries to select a smaller range, the other handle moves too, if possible, to maintain the minimum distance between the two points.
<Slider
label="Select Range"
secondaryLabel="Choose Values"
range
minimumRange={10}
/>
OnChange example
You can trigger a function to run when the value is changed.
<Slider
label="Select Value"
secondaryLabel="Choose Value"
onChange={(event, value) => console.log('The value chosen is', value)}
/>
OnChange range example
When you set the slider to range mode, the value emitted will be an array of [minimum selected, maximum selected].
<Slider
label="Select Range"
secondaryLabel="Choose Values"
onChange={(event, value) => console.log('The values chosen are', value)}
/>
Usage
Overview
Slider is a control element where the user selects a single value or a range of values from a fixed set of options. It provides a visual representation of an adjustable range of values or content. Users can pick a specific value by moving a handle horizontally along a track.
When to use
- To select a single value or a range of values from a fixed set of options.
- When the precise value won't matter to the user, but rather only the approximate range.
When not to use
- To adjust numeric fields by a small discrete amount. Instead, use the stepper.
- To select a precise value. Instead, use the number input.
Source: Nielsen Norman
Anatomy
The slider consists of the following elements:
- Slider label: Text that describes the purpose of the selection control
- Minimum value: The lowest value in the range that the user is required to select from.
- Filled track: A visual indicator that highlights the selected range or progress along the slider from the starting point to the current position.
- Handle: Element that the user can move to the desired point in the range of values. The selected values display beneath the slider handle.
- Track: Horizontal line representing a range of values that users can select from.
- Maximum value: The highest value in the range that the user is required to select from.
Label placement
Display any slider labels above or beside the slider, rather than below it, so that they remain visible while the user is selecting a value.
Layout and orientation
For left-to-right languages (for example, languages written in Latin, Cyrillic, Modern Greek, Indic and Southeast Asian scripts), the minimum value appears on the left end of the track, and the maximum value is on the far right.
For right-to-left languages (for example, languages written in Arabic and Hebrew scripts), the orientation of values is reversed.
Content
General writing guidelines
- Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
- Use present tense verbs and active voice in most situations.
- Use common contractions to lend your copy a more natural and informal tone.
- Use plain language. Avoid unnecessary jargon and complex language.
- Keep words and sentences short.
Include a label
Use the slider label to indicate what value the user is changing. The label should be short and concise. Limit it to a single line of text.
Do use a label to indicate what kind of value or values the user is selecting.
Don't assume that the slider is self-explanatory without a label.
Use sentence case
Slider labels appear in sentence case and without punctuation.
For more information on how to implement sentence case, refer to the UI text style guide.
Do use sentence case for the slider label.
Don't use title case for the slider label.
Behaviors
States
The slider has five visual states, which serve to communicate the status: enabled, hover, active, focus, and disabled.
| Visual | State | Description |
|---|
 | Enabled | Indicates to the user that the element is enabled for interaction. |
 | Hover | Indicates that the user has placed a cursor over the slider handle. |
 | Focus | Indicates that the user is clicking the slider handle. |
 | Active | Indicates that the slider handle is focused and that the keyboard can be used to select a value. The focus state can be used with all other states (including Disabled). |
 | Disabled | Communicates to the user that the element is not interactive. |
Interactions
Mouse
Users can select a numeric value by moving the slider handle with their mouse. By default, the value changes by increments of one.
You can use the step prop to control the increments by which the value changes as the user moves the slider handle. When the step prop is set, the slider's value will only change to values that are multiples of the specified step value.For example, if you have a slider with a range from 0 to 100, and you set the step prop to 5, the slider will only allow the user to select values that are multiples of 5 (0, 5, 10, 15, ..., 100). This means that the slider handle will snap to these specific values as the user drags it.
Keyboard
The slider handle is keyboard focusable. Values can be increased and decreased using the arrow keys.
Screenreader
This component includes the WAI-ARIA role of "slider" and the aria-orientation attribute of 'horizontal' to communicate its purpose and orientation. The slider handle and its label are associated through aria-labelledby. Similarly, the attributes of aria-valuemin, aria-valuemax and aria-valuenow are included to provide meaning to screen reader users. Changes in value are communicated by means of role='alert'.
Accessibility
The Jutro slider component adheres to the following criteria for color and zoom accessibility:
- Color: The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.0 AA requirements.
- Zoom: All content is visible and functional up to and including a zoom factor of 200%.
This component has been validated to meet the WCAG 2.0 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance. Be sure to review the guidance as referenced in the WAI-ARIA Authoring Practices for Sliders.
Code
<Slider
label="Slider"
secondaryLabel="Choose Value"
/>
Import statement
import { Slider } from '@jutro/components/new';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
labelrequired
DescriptionLabel associated with the input field, also passed as a default value to 'aria-label'.
className
DescriptionCSS class passed to a root element of the component.
disabled
DescriptionIf true, the component is rendered in a disabled state.
displayOnly
DescriptionIf true, displays the component value as plain text.
hideIndicators
DescriptionIf this prop is passed as true, the component will not display the min and max values on either end of the Slider.
hideLabel
DescriptionIf true, the label is not visible.
initialValue
DescriptionInitial value of the input. If a value prop is specified along with this prop, this prop's value is discarded.
labelPosition
DescriptionAllows selecting the label position
max
DescriptionMaximum value of the Slider. If this prop is passed, the component does not allow increasing the value to be higher than the specified one by using the handle/keyboard keys.
min
DescriptionMinimum value of the Slider. If this prop is passed, the component does not allow decreasing the value to be lower than the specified one by using handle/keyboard keys.
minimumRange
DescriptionSets minimum range beetween start and end.
onBlur
DescriptionA callback called after the component is blurred.
onChange
DescriptiononChange callback. Gets an event as first argument and a parsed input value as a second argument.
onFocus
DescriptionA callback called after the component is focused.
range
DescriptionIf true, renders a range slider. Otherwise renders a single slider.
secondaryLabel
Typestring | {id?, defaultMessage?, args?}DescriptionUsed to identify the message.
defaultMessage
args
TypeRecord<string, string>
DescriptionSecondary label text to display.
step
DescriptionStep value for value change. If this prop is passed, the component will increase/decrease its value on step when the user moves the handle or press arrow keys.
Type{ text: intlMessageShape, trigger: string }
DescriptionTooltip props object: text - to show the tooltip content, trigger - to set the tooltip trigger.
value
DescriptionValue of the input. Takes precedence over initialValue. If this prop is passed, the component works in controlled mode and its value will change only if this prop changes.
Hooks
No hooks are available for Slider.
Translation keys
There are no translations for Slider.
For information on how to manage translations, see our section about Internationalization.
Escape Hatches
For more information, see our documentation about escape hatches.
