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,
  bool enableHapticFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  int? snapDivisions,
  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)

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.