Skip to Content
Dashflow Logo

Slider Component

A comprehensive guide to using the Slider component with examples, props, and best practices.

Overview

The Slider component provides a range input control that allows users to select a value by dragging a handle along a track. It's designed for settings, forms, and any interface where users need to select a value within a range.

Basic Usage

import { Slider } from '@dashflowx/core'


export default function SliderExample() {
  return (
    <Slider />
  )
}

Preview:

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes
defaultValuenumber[][50]Default value(s) for the slider
maxnumber100Maximum value
minnumber0Minimum value
stepnumber1Step increment
disabledbooleanfalseWhether the slider is disabled

Examples

Basic Slider

import { Slider } from '@dashflowx/core'


export default function BasicSlider() {
  return (
    <Slider />
  )
}

Preview:

Custom Styled Slider

import { Slider } from '@dashflowx/core'


export default function CustomStyledSlider() {
  return (
    <Slider className="border border-blue-500 rounded-lg p-4" />
  )
}

Preview:

Volume Slider

import { Slider } from '@dashflowx/core'


export default function VolumeSlider() {
  return (
    <Slider 
      defaultValue={[75]}
      max={100}
      min={0}
      step={1}
    />
  )
}

Preview:

Price Range Slider

import { Slider } from '@dashflowx/core'


export default function PriceRangeSlider() {
  return (
    <Slider 
      defaultValue={[25, 75]}
      max={100}
      min={0}
      step={5}
    />
  )
}

Preview:

Brightness Slider

import { Slider } from '@dashflowx/core'


export default function BrightnessSlider() {
  return (
    <Slider 
      defaultValue={[80]}
      max={100}
      min={0}
      step={10}
    />
  )
}

Preview:

Common Use Cases

Volume Control

const volumeControl = (
  <Slider 
    defaultValue={[50]}
    max={100}
    min={0}
    step={1}
  />
);

Brightness Control

const brightnessControl = (
  <Slider 
    defaultValue={[80]}
    max={100}
    min={0}
    step={10}
  />
);

Price Range Filter

const priceRangeFilter = (
  <Slider 
    defaultValue={[25, 75]}
    max={100}
    min={0}
    step={5}
  />
);

Progress Indicator

const progressIndicator = (
  <Slider 
    defaultValue={[60]}
    max={100}
    min={0}
    step={1}
    disabled={true}
  />
);

Best Practices

1. Appropriate Range

Set appropriate min and max values for your use case.

// ✅ Good - Appropriate range
<Slider max={100} min={0} />


// ❌ Avoid - Extreme range
<Slider max={1000000} min={0} />

2. Logical Step Values

Use logical step values based on your use case.

// ✅ Good - Logical steps
<Slider step={1} /> // For precise control
<Slider step={10} /> // For rough control


// ❌ Avoid - Illogical steps
<Slider step={7} /> // For most use cases

3. Clear Labels

Provide clear labels for slider values.

// ✅ Good - Clear labels
<div>
  <label>Volume: {value}%</label>
  <Slider />
</div>


// ❌ Avoid - No labels
<Slider />

4. Accessible Controls

Ensure sliders are accessible to all users.

// ✅ Good - Accessible
<Slider aria-label="Volume control" />


// ❌ Avoid - Not accessible
<Slider />

5. Consistent Styling

Maintain consistent styling across sliders.

// ✅ Good - Consistent styling
<Slider className="standard-slider-style" />


// ❌ Avoid - Inconsistent styling
<Slider className="random-styles" />

Customization

Custom Styling

You can customize the slider appearance using CSS classes:

<Slider className="border border-gray-300 rounded-lg p-4" />

Different Themes

Use different themes for different contexts:

// Light theme
<Slider className="bg-white border-gray-200" />


// Dark theme
<Slider className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<Slider className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small slider
<Slider className="h-1" />


// Standard slider
<Slider className="h-2" />


// Large slider
<Slider className="h-3" />

Advanced Usage

Dynamic Slider Values

Update slider values dynamically:

const [sliderValue, setSliderValue] = useState(50);


<Slider 
  defaultValue={[sliderValue]}
  onValueChange={(value) => setSliderValue(value[0])}
/>

Multiple Sliders

Use multiple sliders for different controls:

const [volume, setVolume] = useState(50);
const [brightness, setBrightness] = useState(80);


<div className="space-y-4">
  <div>
    <label>Volume: {volume}%</label>
    <Slider 
      defaultValue={[volume]}
      onValueChange={(value) => setVolume(value[0])}
    />
  </div>
  <div>
    <label>Brightness: {brightness}%</label>
    <Slider 
      defaultValue={[brightness]}
      onValueChange={(value) => setBrightness(value[0])}
    />
  </div>
</div>

Slider with Labels

Add labels and value displays:

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


<div className="space-y-2">
  <div className="flex justify-between">
    <span>Min: 0</span>
    <span>Current: {value}</span>
    <span>Max: 100</span>
  </div>
  <Slider 
    defaultValue={[value]}
    onValueChange={(value) => setValue(value[0])}
  />
</div>
  • Input: For text input
  • Range: For range inputs
  • Progress: For progress indicators
  • Switch: For toggle controls
  • Button: For action buttons

API Reference

For the complete API reference and advanced usage patterns, see the Slider API documentation.

Edit this page on GitHub
previousProgress