Slider

A draggable slider component for selecting values within a continuous range.

When to use this

Volume controls: Adjust audio or video volume levels
Brightness settings: Control screen brightness or lighting
Price filters: Select price ranges in e-commerce applications
Value adjustments: Set any numeric value within a defined range

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class SliderExample extends StatefulWidget {
  const SliderExample({super.key});
 
  @override
  State<SliderExample> createState() => _SliderExampleState();
}
 
class _SliderExampleState extends State<SliderExample> {
  double _selectedValue = 0.3;
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      child: RemixSlider(
        value: _selectedValue,
        style: style,
        onChanged: (value) {
          setState(() {
            _selectedValue = value;
          });
        },
      ),
    );
  }
 
  RemixSliderStyle get style {
    return RemixSliderStyle()
        .thumbSize(const Size(24, 24))
        .thumb(
          BoxStyler().shapeCircle().shadow(
                BoxShadowMix()
                    .color(Colors.black45)
                    .blurRadius(4)
                    .offset(const Offset(0, 2)),
              ),
        )
        .thumbColor(Colors.black)
        .thickness(2)
        .trackColor(Colors.grey.shade300)
        .rangeColor(Colors.black)
        .onDisabled(
          RemixSliderStyle()
              .trackColor(Colors.grey.shade300)
              .rangeColor(Colors.blueGrey)
              .thumbColor(Colors.white.withValues(alpha: 0.6)),
        );
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalSliderExample extends StatefulWidget {
  const FortalSliderExample({super.key});
 
  @override
  State<FortalSliderExample> createState() => _FortalSliderExampleState();
}
 
class _FortalSliderExampleState extends State<FortalSliderExample> {
  double _value = 0.5;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        RemixSlider(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
          style: FortalSliderStyle.solid(),
        ),
        RemixSlider(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
          style: FortalSliderStyle.soft(),
        ),
      ],
    );
  }
}

See the FortalSliderStyle source code for all available options.

Constructor


const RemixSlider({
  Key? key,
  required double value,
  required ValueChanged<double>? onChanged,
  ValueChanged<double>? onChangeStart,
  ValueChanged<double>? onChangeEnd,
  double min = 0.0,
  double max = 1.0,
  bool enabled = true,
  bool enableHapticFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  int? snapDivisions,
  RemixSliderStyle style = const RemixSliderStyle.create(),
  RemixSliderSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`min`	`double`	Optional. The minimum value the slider can have.
`max`	`double`	Optional. The maximum value the slider can have.
`onChanged`	`ValueChanged<double>?`	Required. Called during drag with the new value.
`value`	`double`	Required. The current value of the slider. Must be between [min] and [max].
`onChangeEnd`	`ValueChanged<double>?`	Optional. Called when the user is done selecting a new value.
`onChangeStart`	`ValueChanged<double>?`	Optional. Called when the user starts dragging the slider.
`style`	`RemixSliderStyle`	Optional. The style configuration for the slider.
`styleSpec`	`RemixSliderSpec?`	Optional. The style spec for the slider.
`enabled`	`bool`	Optional. Whether the slider is enabled for interaction.
`enableHapticFeedback`	`bool`	Optional. Whether to provide haptic feedback during value changes. Defaults to true.
`focusNode`	`FocusNode?`	Optional. The focus node for the slider.
`autofocus`	`bool`	Optional. Whether the slider should automatically request focus when it is created.
`snapDivisions`	`int?`	Optional. Optional snapping divisions for interaction only (no visual ticks). When provided, the slider snaps to these discrete steps but does not render any division marks on the track.

Style Methods

Method	Description
`thumbColor(Color value)`	Sets thumb color
`trackColor(Color value)`	Sets track color (background rail)
`rangeColor(Color value)`	Sets range color (filled progress portion)
`thumb(BoxStyler value)`	Sets thumb styling
`thumbSize(Size size)`	Sets thumb to a fixed [size].
`alignment(Alignment value)`	Sets thumb alignment
`thickness(double value)`	Sets stroke width for both track and range.
`trackThickness(double value)`	Sets stroke width for the track only (background rail).
`rangeThickness(double value)`	Sets stroke width for the range only (filled portion).
`padding(EdgeInsetsGeometryMix value)`	Sets the container padding.
`color(Color value)`	Sets background color.
`size(double width, double height)`	Sets the component size.
`borderRadius(BorderRadiusGeometryMix radius)`	Sets the border radius.
`constraints(BoxConstraintsMix value)`	Sets size constraints on the component.
`decoration(DecorationMix value)`	Sets the container decoration.
`margin(EdgeInsetsGeometryMix value)`	Sets the container margin.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`animate(AnimationConfig animation)`	Configures implicit animation for style transitions.