Slider

​

Overview

​

Basic Usage

​

Basic Slider

double sliderValue = 50.0;

HuxSlider(
  value: sliderValue,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  },
  min: 0,
  max: 100,
)

​

Slider with Label

double volume = 75.0;

HuxSlider(
  value: volume,
  onChanged: (value) {
    setState(() {
      volume = value;
    });
  },
  min: 0,
  max: 100,
  label: 'Volume',
)

​

Slider with Value Display

double brightness = 60.0;

HuxSlider(
  value: brightness,
  onChanged: (value) {
    setState(() {
      brightness = value;
    });
  },
  min: 0,
  max: 100,
  label: 'Brightness',
  showValue: true,
)

​

Slider with Divisions

double rating = 3.0;

HuxSlider(
  value: rating,
  onChanged: (value) {
    setState(() {
      rating = value;
    });
  },
  min: 1,
  max: 5,
  divisions: 4, // Creates 5 discrete values (1, 2, 3, 4, 5)
  label: 'Rating',
  showValue: true,
)

​

Disabled Slider

HuxSlider(
  value: 50.0,
  onChanged: null, // Disables the slider
  min: 0,
  max: 100,
  label: 'Volume',
)

​

Properties

​

Core Properties

• value - Current slider value (double)
• onChanged - Callback triggered when value changes (null for disabled)
• min - Minimum value (default: 0.0)
• max - Maximum value (default: 100.0)

​

Display Properties

• label - Optional label displayed above the slider
• showValue - Whether to display the current value next to the label
• divisions - Number of discrete divisions (null for continuous)

​

Styling Properties

• size - Slider size variant (small, medium, large)
• activeColor - Custom active color (uses primary color by default)
• isDisabled - Whether the slider is disabled

​

Size Variants

​

Small Slider

• Track Height: 2px
• Thumb Size: 14px × 14px
• Overlay Size: 28px × 28px
• Tick Size: 2px

​

Medium Slider ⭐ Default

• Track Height: 3px
• Thumb Size: 18px × 18px
• Overlay Size: 36px × 36px
• Tick Size: 3px

​

Large Slider

• Track Height: 4px
• Thumb Size: 22px × 22px
• Overlay Size: 44px × 44px
• Tick Size: 4px

​

Styling & Colors

​

Slider Colors

• Active Track: HuxTokens.primary(context) (or custom activeColor)
• Inactive Track: HuxTokens.surfaceSecondary(context)
• Thumb: HuxTokens.primary(context) (or custom activeColor)
• Overlay: Primary color with 10% opacity
• Tick Marks: HuxTokens.primary(context) (when divisions are used)

​

Disabled State Colors

• Active Track (Disabled): HuxTokens.borderSecondary(context)
• Inactive Track (Disabled): HuxTokens.surfaceSecondary(context) with 50% opacity
• Thumb (Disabled): HuxTokens.surfaceSecondary(context)
• Text (Disabled): HuxTokens.textDisabled(context)

​

Custom Colors

HuxSlider(
  value: sliderValue,
  onChanged: (value) => setState(() => sliderValue = value),
  min: 0,
  max: 100,
  activeColor: Colors.blue,
  label: 'Custom Color',
)

​

Advanced Examples

​

Volume Control

double volume = 50.0;

HuxSlider(
  value: volume,
  onChanged: (value) {
    setState(() {
      volume = value;
    });
    // Update audio volume
    audioPlayer.setVolume(value / 100);
  },
  min: 0,
  max: 100,
  label: 'Volume',
  showValue: true,
  divisions: 20, // 5% increments
)

​

Rating Slider

double rating = 3.0;

HuxSlider(
  value: rating,
  onChanged: (value) {
    setState(() {
      rating = value;
    });
  },
  min: 1,
  max: 5,
  divisions: 4, // Creates 5 discrete values
  label: 'Rating',
  showValue: true,
)

​

Price Range Filter

double maxPrice = 500.0;

HuxSlider(
  value: maxPrice,
  onChanged: (value) {
    setState(() {
      maxPrice = value;
    });
    // Filter products
    filterProducts(maxPrice: value);
  },
  min: 0,
  max: 1000,
  label: 'Max Price',
  showValue: true,
)

​

Form Integration

final _formKey = GlobalKey<FormState>();
double satisfaction = 5.0;

Form(
  key: _formKey,
  child: Column(
    children: [
      HuxSlider(
        value: satisfaction,
        onChanged: (value) {
          setState(() {
            satisfaction = value;
          });
        },
        min: 1,
        max: 10,
        divisions: 9,
        label: 'Satisfaction Level',
        showValue: true,
      ),
      const SizedBox(height: 20),
      HuxButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            submitForm(satisfaction: satisfaction);
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
)

​

Accessibility

• Supports keyboard navigation
• Provides semantic labels for screen readers
• Maintains proper touch target sizes (minimum 44px × 44px)
• Uses theme-aware colors that meet WCAG contrast requirements

​

Best Practices

1. Use Labels: Always provide a label to make the slider’s purpose clear
2. Show Values: Use showValue: true when the exact value is important
3. Use Divisions: Set divisions when you need discrete values (e.g., ratings, steps)
4. Provide Feedback: Consider showing additional feedback when the value changes (e.g., updating a preview)
5. Range Selection: For range selection, use two sliders or consider a RangeSlider component

​

API Reference

​

HuxSlider Properties

​

HuxSliderSize Enum

• HuxSliderSize.small - Small slider for compact layouts
• HuxSliderSize.medium - Medium slider for standard use (default)
• HuxSliderSize.large - Large slider for emphasis