Slider

A cross-platform React slider component for selecting values within a range. Supports single value, range mode with two thumbs, and optional input fields for direct value entry.

Installation

npm install @xsolla/xui-slider
# or
yarn add @xsolla/xui-slider

Demo

Basic Slider

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function BasicSlider() {
  const [value, setValue] = React.useState(50);

  return (
    <Slider
      value={value}
      onChange={setValue}
      min={0}
      max={100}
    />
  );
}

Slider with Label

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function SliderWithLabel() {
  const [volume, setVolume] = React.useState(75);

  return (
    <Slider
      value={volume}
      onChange={setVolume}
      min={0}
      max={100}
      label={`Volume: ${volume}%`}
    />
  );
}

Range Slider

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function RangeSlider() {
  const [minPrice, setMinPrice] = React.useState(20);
  const [maxPrice, setMaxPrice] = React.useState(80);

  return (
    <Slider
      range
      minValue={minPrice}
      maxValue={maxPrice}
      onRangeChange={(min, max) => {
        setMinPrice(min);
        setMaxPrice(max);
      }}
      min={0}
      max={100}
      label="Price Range"
      minThumbAriaLabel="Minimum price"
      maxThumbAriaLabel="Maximum price"
    />
  );
}

Slider with Input Fields

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function SliderWithInputs() {
  const [value, setValue] = React.useState(50);

  return (
    <Slider
      value={value}
      onChange={setValue}
      min={0}
      max={100}
      inputPosition="right"
      label="Brightness"
    />
  );
}

Range Slider with Both Inputs

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function RangeSliderWithInputs() {
  const [min, setMin] = React.useState(1000);
  const [max, setMax] = React.useState(5000);

  return (
    <Slider
      range
      minValue={min}
      maxValue={max}
      onRangeChange={(minVal, maxVal) => {
        setMin(minVal);
        setMax(maxVal);
      }}
      min={0}
      max={10000}
      step={100}
      inputPosition="both"
      label="Budget Range"
      minThumbAriaLabel="Minimum budget"
      maxThumbAriaLabel="Maximum budget"
    />
  );
}

Anatomy

Import the component and use it directly:

import { Slider } from '@xsolla/xui-slider';

// Single value slider
<Slider
  value={value}                // Current value
  onChange={handleChange}      // Value change handler
  min={0}                      // Minimum bound
  max={100}                    // Maximum bound
  step={1}                     // Step increment
  label="Label"                // Label above slider
  inputPosition="none"         // Input field position
  showLabels={false}           // Show min/max labels
  disabled={false}             // Disabled state
  activeColor="brand"          // Color scheme
/>

// Range slider
<Slider
  range                        // Enable range mode
  minValue={minVal}            // Minimum selected value
  maxValue={maxVal}            // Maximum selected value
  onRangeChange={handleRange}  // Range change handler
  min={0}
  max={100}
/>

Examples

Slider Sizes

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function SliderSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Slider value={50} size="sm" label="Small" />
      <Slider value={50} size="md" label="Medium (default)" />
      <Slider value={50} size="lg" label="Large" />
      <Slider value={50} size="xl" label="Extra Large" />
    </div>
  );
}

Color Schemes

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function SliderColors() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Slider value={60} activeColor="brand" label="Brand" />
      <Slider value={60} activeColor="brandExtra" label="Brand Extra" />
      <Slider value={60} activeColor="success" label="Success" />
      <Slider value={60} activeColor="warning" label="Warning" />
      <Slider value={60} activeColor="alert" label="Alert" />
      <Slider value={60} activeColor="neutral" label="Neutral" />
    </div>
  );
}

Slider with Icons

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';
import { Volume1, Volume2 } from '@xsolla/xui-icons-base';

export default function SliderWithIcons() {
  const [value, setValue] = React.useState(50);

  return (
    <Slider
      value={value}
      onChange={setValue}
      min={0}
      max={100}
      iconLeft={<Volume1 />}
      iconRight={<Volume2 />}
    />
  );
}

Step Slider

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function StepSlider() {
  const [value, setValue] = React.useState(50);

  return (
    <Slider
      value={value}
      onChange={setValue}
      min={0}
      max={100}
      step={10}
      showLabels
      label={`Value: ${value}`}
    />
  );
}

Disabled Slider

import * as React from 'react';
import { Slider } from '@xsolla/xui-slider';

export default function DisabledSlider() {
  return (
    <Slider
      value={50}
      min={0}
      max={100}
      disabled
      label="Disabled slider"
    />
  );
}

API Reference

Slider

A slider component for value selection.

Slider Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | value | number | 0 | Current value (single slider mode). | | minValue | number | - | Minimum value (range mode). | | maxValue | number | - | Maximum value (range mode). | | min | number | 0 | Minimum bound of the slider. | | max | number | 100 | Maximum bound of the slider. | | step | number | 1 | Step increment for value changes. | | onChange | (value: number) => void | - | Callback for single value changes. | | onRangeChange | (min: number, max: number) => void | - | Callback for range value changes. | | size | "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the slider. | | disabled | boolean | false | Whether the slider is disabled. | | range | boolean | false | Enable range mode with two thumbs. | | inputPosition | "left" \| "right" \| "both" \| "none" | "none" | Position of input field(s). | | showLabels | boolean | false | Show min/max labels. | | label | string | - | Label displayed above the slider. | | activeColor | "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral" | "brand" | Color scheme for the active track. | | iconLeft | ReactNode | - | Icon on the left side. | | iconRight | ReactNode | - | Icon on the right side. | | iconInside | ReactNode | - | Icon inside input field. | | iconInsidePosition | "left" \| "right" | - | Position of icon inside input. | | aria-label | string | - | Accessible label. | | minThumbAriaLabel | string | "Minimum value" | Label for min thumb in range mode. | | maxThumbAriaLabel | string | "Maximum value" | Label for max thumb in range mode. | | testID | string | - | Test identifier. |

Size Configuration:

| Size | Height | Track Height | Thumb Size | Input Width | | :--- | :----- | :----------- | :--------- | :---------- | | sm | 32px | 4px | 14px | 48px | | md | 40px | 6px | 16px | 56px | | lg | 48px | 6px | 18px | 64px | | xl | 56px | 8px | 20px | 72px |

Keyboard Navigation

| Key | Action | | :-- | :----- | | Arrow Right/Up | Increase value by step | | Arrow Left/Down | Decrease value by step | | Shift + Arrow | Increase/decrease by 10x step | | Home | Jump to minimum value | | End | Jump to maximum value |

Theming

Slider uses the design system theme for colors:

// Colors accessed via theme
theme.colors.control.slider.track         // Inactive track
theme.colors.control.slider.trackActive   // Active track (uses activeColor)
theme.colors.control.slider.thumb         // Thumb color
theme.colors.control.slider.thumbBorder   // Thumb border
theme.colors.content.primary              // Label text

Accessibility

• Uses role="slider" semantic role
• aria-valuenow, aria-valuemin, aria-valuemax for current state
• Full keyboard navigation support
• Focus indicator follows WCAG guidelines
• Range mode has separate labels for min/max thumbs
• Disabled state properly announced