Slider

Guidelines
React API Reference
Blazor API Reference

Sliders allow users to select a value from a continuous range by dragging a handle along a track, providing an intuitive way to adjust numeric values with immediate visual feedback.

Guidance

Aspect	Best Practice
Usage	Use for selecting values from a continuous range where precise control is important. Ideal for adjusting settings, filtering, or configuring parameters.
Content	Provide clear labels for min/max values and current selection. Consider showing the current value during interaction.
Behavior	Provide smooth dragging interaction with immediate visual feedback. Support keyboard navigation for accessibility.
States	Clearly indicate enabled, disabled, and focused states. Show visual feedback during interaction and value changes.
Feedback	Use visual indicators for current position and range. Provide haptic feedback on mobile devices when possible.
Examples	Volume controls, price ranges, date ranges, opacity settings, or any numeric value selection within defined bounds.

Best Practices

Clear Range Indicators: Always show minimum and maximum values to provide context for the selection.
Appropriate Step Size: Choose step sizes that match the precision needed for the use case.
Responsive Design: Ensure sliders work well on both mouse and touch devices with appropriate handle sizes.
Value Display: Show the current value(s) clearly, especially during interaction.
Keyboard Support: Provide arrow key navigation and page up/down for larger steps.
Accessible Labels: Include proper ARIA labels and descriptions for screen readers.

Do’s and Don’ts

Do

Use for continuous value selection within defined ranges.
Provide clear visual feedback for current values and ranges.
Support both mouse/touch and keyboard interaction.
Show value labels or current selection when helpful.

Don't

Use for discrete choices (use radio buttons or select instead).
Make handles too small for touch interaction.
Hide the current value when precision matters.
Use for ranges where exact values are critical without additional input methods.

Additional Guidance

Psychological Impact:
- Direct Manipulation: Sliders provide a sense of direct control over values, making adjustments feel intuitive.
- Immediate Feedback: Real-time visual changes help users understand the impact of their adjustments.
- Range Awareness: Visual representation of the full range helps users understand the scale and make informed decisions.

Import

import { Slider } from '@strongtie/design-system/slider';

Usage

<Slider defaultValue={[33]} max={100} step={1} />

Props

defaultValue

number[]

The default value of the slider.

value

number[]

The controlled value of the slider.

onValueChange

(value: number[]) => void

Event handler called when the value changes.

onValueCommit

(value: number[]) => void

Event handler called when the value is committed.

name

string

The name of the slider.

disabled

boolean

default:"false"

When true, prevents the user from interacting with the slider.

orientation

"horizontal" | "vertical"

default:"\"horizontal\""

The orientation of the slider.

dir

"ltr" | "rtl"

The reading direction of the slider.

inverted

boolean

default:"false"

Whether the slider is visually inverted.

min

number

default:"0"

The minimum value for the slider.

max

number

default:"100"

The maximum value for the slider.

step

number

default:"1"

The stepping interval.

minStepsBetweenThumbs

number

default:"0"

The minimum permitted steps between multiple thumbs.

Usage Examples

<Slider defaultValue={[33]} max={100} step={1} />

Styling Classes

The following CSS classes are applied by the Slider component:

slider – Root slider container with track and handle positioning
slider-track – Background track element showing the full range
slider-range – Filled portion of the track representing the selected range
slider-thumb – Draggable handle element for value selection

For more examples, visit the Storybook.

Example

<StudsSlider @bind-Value=@value TValue="int" />

@code {
    int value = 33;
}

Value

int

The default value of the slider.

TValue

The type of the value.

Step

string

The step size of the slider.

Range

bool

If true, the slider will be a range slider.

Min

int

The minimum value of the slider.

Max

int

The maximum value of the slider.

Name

string

The name of the slider.

TabIndex

int

The tab index of the slider.

Disabled

bool

If true, the slider will be disabled.

ValueChanged

EventCallback<int>

Callback function that is called when the value changes.

ValueChanged

EventCallback<int>

Callback function that is called when the value changes.

ValueExpression

Expression<Func<int>>

The expression that is used to bind the value.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsSlider @bind-Value="sliderValue" TValue="int" Min="0" Max="100" />

@code {
    int sliderValue = 33;
}

Styling Classes

The following CSS classes are applied by the Slider component:

slider – Root slider container with orientation and positioning
slider.-range – Range track element showing selected portion
slider.-range-min – Minimum range indicator for single-value sliders
slider.-handle – Draggable handle element for value selection
slider.-horizontal – Horizontal orientation modifier (default)
slider.-vertical – Vertical orientation modifier

For more examples, visit the Storybook

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

Props

Usage Examples

Styling Classes

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Props

​Usage Examples

​Styling Classes

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

Props

Usage Examples

Styling Classes

Usage Examples

Styling Classes