Slider

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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

  SliderStyler get style {
    return SliderStyler()
        .thumbSize(const Size(24, 24))
        .thumb(
          BoxStyler().shape(.circle()).shadow(
                BoxShadowMix()
                    .color(Colors.black45)
                    .blurRadius(4)
                    .offset(x: 0, y: 2),
              ),
        )
        .thumbColor(Colors.black)
        .thickness(2)
        .trackColor(Colors.grey.shade300)
        .rangeColor(Colors.black)
        .onDisabled(
          SliderStyler()
              .trackColor(Colors.grey.shade300)
              .rangeColor(Colors.blueGrey)
              .thumbColor(Colors.white.withValues(alpha: 0.6)),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'ui/ui.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),
        ),
      ],
    );
  }
}

See the fortalSliderStyle source code for all available options.

Constructor

import 'package:flutter/material.dart';
import 'package:naked_ui/naked_ui.dart';
import 'package:remix/remix.dart';

RemixSlider remixSliderConstructor({
  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,
  String? semanticLabel,
  NakedSliderSemanticFormatterCallback? semanticFormatterCallback,
  bool excludeSemantics = false,
  SliderStyler style = const SliderStyler.create(),
  SliderSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`key` → `Key?`

Optional. Controls how one widget replaces another widget in the tree.

`min` → `double`

Optional. The minimum value the slider can have. Must be strictly less than max.

`max` → `double`

Optional. The maximum value the slider can have. Must be strictly greater than min.

`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` → `SliderStyler`

Optional. The style configuration for the slider.

`styleSpec` → `SliderSpec?`

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.

Optional. Optional snapping divisions for interaction only (no visual ticks). When provided it must be greater than 0, and the slider snaps to these discrete steps but does not render any division marks on the track.