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

Interactive preview

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;
          });
        },
      ),
    );
  }
 
  RemixSliderStyler get style {
    return RemixSliderStyler()
        .thumbSize(const .square(24))
        .thumb(
          .shape(.circle())
          .shadow(
            .color(Colors.black45)
            .blurRadius(4)
            .offset(x: 0, y: 2),
          ),
        )
        .thumbColor(Colors.black)
        .thickness(2)
        .trackColor(Colors.grey.shade300)
        .rangeColor(Colors.black)
        .onDisabled(
          .trackColor(Colors.grey.shade300)
          .rangeColor(Colors.blueGrey)
          .thumb(.color(Colors.white.withValues(alpha: 0.6))),
        );
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget 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: [
        FortalSlider.surface(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
        FortalSlider.soft(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    );
  }
}

Constructor

const RemixSlider({
  Key? key,
  required double value,
  ValueChanged<double>? onChanged,
  ValueChanged<double>? onChangeStart,
  ValueChanged<double>? onChangeEnd,
  double min = 0.0,
  double max = 1.0,
  bool enabled = true,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  int? snapDivisions,
  RemixSliderStyler style = const RemixSliderStyler.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>?

Optional. Called during drag with the new value. When omitted, the slider is disabled.

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 → RemixSliderStyler

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.

enableFeedback → bool

Optional. Whether to provide platform 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).

trackWidth(double value)

Sets stroke width for the track only.

rangeThickness(double value)

Sets stroke width for the range only (filled portion).

rangeWidth(double value)

Sets stroke width for the range only.

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, {Alignment alignment = .center})

Applies a matrix transformation to the component.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

variants(List<VariantStyle<RemixSliderSpec>> value)

Sets style variants.

modifier(WidgetModifierConfig value)

Sets the widget modifier.

call({ ... })

Creates a RemixSlider widget with this style applied.