Fluxo UIFluxo UIv0.4.1

Slider

A versatile slider component with range mode, marks, string labels, snap behavior, and full keyboard accessibility.

Basic Usage

Default Slider

A simple slider with controlled value and tooltip on hover.

Controlled with tooltip (value: 40)
Uncontrolled with min/max labels
With value display on the right
25
Disabled slider
import { Slider } from 'fluxo-ui';

const [value, setValue] = useState(40);

<Slider
  value={value}
  onChange={(v) => setValue(v as number)}
  showTooltip
/>

<Slider defaultValue={60} showMinMax />

<Slider defaultValue={25} showValue valuePosition="right" />

Range Slider

Enable dual-thumb mode with the range prop for selecting a value range.

Range Slider

Use the range prop for dual-thumb selection of a value range.

Basic range (20 - 80)
Price range filter
$1,000 – $5,000
Range with marks
import { Slider } from 'fluxo-ui';

const [range, setRange] = useState<[number, number]>([20, 80]);

<Slider
  range
  rangeValue={range}
  onChange={(v) => setRange(v as [number, number])}
  showTooltip="always"
  showMinMax
/>

<Slider
  range
  defaultRangeValue={[1000, 5000]}
  min={0}
  max={10000}
  step={100}
  showValue
  valuePosition="top"
  valueFormat={(v) => `$${v.toLocaleString()}`}
/>

Sizes

Use the size prop to control the track height, thumb size, and label font size.

Slider Sizes

Five size options control the track height, thumb size, and font size.

Extra Small (xs)
Small (sm)
Medium (default) (md)
Large (lg)
Extra Large (xl)
import { Slider } from 'fluxo-ui';
import type { SliderSize } from 'fluxo-ui';

const sizes: SliderSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];

{sizes.map((size) => (
  <Slider key={size} size={size} defaultValue={50} showTooltip />
))}

Variants

Six color variants for different semantic contexts.

Color Variants

Six color variants for different semantic purposes.

Default
Primary
Success
Warning
Danger
Info
import { Slider } from 'fluxo-ui';
import type { SliderVariant } from 'fluxo-ui';

const variants: SliderVariant[] = [
  'default', 'primary', 'success', 'warning', 'danger', 'info'
];

{variants.map((variant) => (
  <Slider key={variant} variant={variant} defaultValue={60} />
))}

Vertical

Set orientation="vertical" for a vertical slider layout.

Vertical Orientation

Set orientation to vertical for a top-to-bottom slider.

Default
Success
Large
Range
Disabled
import { Slider } from 'fluxo-ui';

<Slider
  orientation="vertical"
  defaultValue={60}
  showTooltip
/>

<Slider
  orientation="vertical"
  range
  defaultRangeValue={[20, 80]}
  showTooltip="always"
  variant="success"
/>

With Marks

Add marks along the track with marks={true} for auto-generated marks or pass a custom array.

Slider with Marks

Display marks along the track using auto-generated or custom mark definitions.

Auto marks (step=25)
Temperature marks
Percentage marks with range
import { Slider } from 'fluxo-ui';

// Auto-generated marks based on step
<Slider defaultValue={50} marks step={10} showTooltip />

// Custom marks with labels
<Slider
  defaultValue={37}
  min={0}
  max={100}
  marks={[
    { value: 0, label: '0°C' },
    { value: 25, label: '25°C' },
    { value: 37, label: '37°C' },
    { value: 50, label: '50°C' },
    { value: 75, label: '75°C' },
    { value: 100, label: '100°C' },
  ]}
  showTooltip
  variant="danger"
/>

String Values

Use the labels prop to map slider positions to string values such as months, sizes, or priorities.

String Labels

Use the labels prop to map slider positions to string values like months or sizes.

Month selector (selected: Apr)
Clothing size (selected: M)
M
Priority level
import { Slider } from 'fluxo-ui';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

<Slider
  labels={months}
  defaultValue={3}
  marks
  showTooltip="always"
/>

const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];

<Slider
  labels={sizes}
  defaultValue={2}
  marks
  showValue
  valuePosition="top"
/>

Formatting

Customize how values appear with tooltipFormat and valueFormat callbacks.

Value Formatting

Use tooltipFormat and valueFormat to customize how values are displayed.

Currency format
$500
Percentage format
Temperature with unit
22°F
Time duration (minutes)
45m
import { Slider } from 'fluxo-ui';

// Currency formatting
<Slider
  min={0}
  max={1000}
  step={10}
  defaultValue={500}
  showTooltip="always"
  tooltipFormat={(v) => `$${v}`}
  valueFormat={(v) => `$${v.toLocaleString()}`}
  showValue
  valuePosition="top"
/>

// Percentage formatting
<Slider
  defaultValue={65}
  showTooltip="always"
  tooltipFormat={(v) => `${v}%`}
  showMinMax
/>

// Temperature with unit
<Slider
  min={-20}
  max={50}
  defaultValue={22}
  showTooltip
  tooltipFormat={(v) => `${v}°F`}
  showValue
  valuePosition="right"
  valueFormat={(v) => `${v}°F`}
/>

Grid & Snap

Use snap for step-based snapping or gridStep for coarser grid alignment with animated transitions.

Grid & Snap Behavior

Enable snap for step-based snapping, or use gridStep for coarser grid alignment with animated transitions.

Snap to step=10 (value: 50)
Grid step=25 with animation (value: 0)
Snap to step=5 with no fill
Grid step=20, range mode
import { Slider } from 'fluxo-ui';

// Snap to step with smooth animation
<Slider
  defaultValue={50}
  snap
  step={10}
  marks
  showTooltip
/>

// Grid step with custom duration
<Slider
  defaultValue={0}
  gridStep={25}
  gridDuration={200}
  marks
  showTooltip="always"
  variant="success"
/>

Import

import { Slider } from 'fluxo-ui';
import type { SliderProps, SliderMark, SliderSize, SliderVariant } from 'fluxo-ui';

Props

value
number

Controlled value of the slider.

defaultValue
number"0"

Initial value for uncontrolled usage.

min
number"0"

Minimum value.

max
number"100"

Maximum value.

step
number"1"

Step increment between values.

orientation
'horizontal' | 'vertical'"'horizontal'"

Slider axis direction.

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Size of the track and thumb.

variant
'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'"'primary'"

Color variant.

disabled
boolean"false"

Disable interaction.

range
boolean"false"

Enable dual-thumb range mode.

rangeValue
[number, number]

Controlled range value (low, high).

defaultRangeValue
[number, number]

Initial range value for uncontrolled usage.

marks
SliderMark[] | boolean

Display marks on the track. Pass true for auto-generated marks or an array for custom marks.

showTooltip
boolean | 'always'"false"

Show tooltip on hover/drag or always.

tooltipFormat
(value: number) => string

Custom formatter for tooltip text.

valueFormat
(value: number) => string

Custom formatter for displayed value.

showValue
boolean"false"

Display the current value alongside the slider.

valuePosition
'top' | 'bottom' | 'left' | 'right'"'top'"

Position of the displayed value.

snap
boolean"false"

Snap the thumb to the nearest step.

gridStep
number

Coarser step for grid-based snapping.

gridDuration
number"150"

Animation duration (ms) for grid snap transitions.

labels
string[]

Map slider positions to string labels. Min/max auto-set from array length.

showMinMax
boolean"false"

Show min and max labels at the ends.

trackHeight
number

Override the track height/width in pixels.

thumbSize
number

Override the thumb size in pixels.

filled
boolean"true"

Show a filled track from min to current value.

onChange
(value: number | [number, number]) => void

Called on every value change during interaction.

onChangeEnd
(value: number | [number, number]) => void

Called when interaction ends (pointer up or keyboard).

name
string

When set, renders hidden form inputs so the slider value submits with surrounding forms. Range mode produces `${name}_min` and `${name}_max`.

rangeStartLabel
string"'Minimum'"

ARIA label for the lower thumb in range mode (helps screen readers distinguish thumbs).

rangeEndLabel
string"'Maximum'"

ARIA label for the upper thumb in range mode.

Features

Range Mode

Dual-thumb slider for selecting value ranges with independent low/high controls.

Five Sizes

Extra small to extra large with proportional track, thumb, and font scaling.

Six Variants

Semantic color variants: default, primary, success, warning, danger, and info.

Marks & Labels

Auto-generated or custom marks with labels along the track for precise selection.

Grid Snap

Snap to steps or a custom grid with configurable animation duration.

Accessibility

Full keyboard support with arrow keys, Page Up/Down, Home/End, and ARIA attributes.