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)),
        );
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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(),
        ),
      ],
    );
  }
}

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,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticLabel,
  RemixSliderStyle style = const RemixSliderStyle.create(),
  RemixSliderSpec? styleSpec,
})

Properties

Widget Properties

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

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)

color(Color value)

size(double width, double height)

borderRadius(BorderRadiusGeometryMix radius)

constraints(BoxConstraintsMix value)

decoration(DecorationMix value)

margin(EdgeInsetsGeometryMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

wrap(WidgetModifierConfig value)

animate(AnimationConfig animation)