Widget Field Guide

Explore Flutter widgets for Android and iOS. Pick a widget, run its live mobile preview, and copy the Dart code.

LIVE MOBILE PREVIEW

WelkRangeSlider

A controlled single-thumb numeric slider with stepped values, a visible label and keyboard and screen-reader adjustments.

Install

Terminal

flutter pub add welkui_flutter

Latest release: welkui_flutter 0.1.5 on pub.dev. Requires Dart 3.13.4+ and Flutter 3.35.0+.

Usage

Dart

import 'package:flutter/material.dart';
import 'package:welkui_flutter/welkui_flutter.dart';

class RangeSliderExample extends StatefulWidget {
  const RangeSliderExample({super.key});

  @override
  State<RangeSliderExample> createState() => _RangeSliderExampleState();
}

class _RangeSliderExampleState extends State<RangeSliderExample> {
  double _volume = 50;

  @override
  Widget build(BuildContext context) {
    return WelkRangeSlider(
      label: 'Volume',
      value: _volume,
      step: 5,
      semanticFormatter: (value) => '${value.round()} percent',
      onChanged: (value) => setState(() => _volume = value),
    );
  }
}

Same look as the React WelkRangeSlider.

Variants and behavior

Configurable minimum, maximum and step
Single value, not a two-ended interval
Optional accessible value formatter

Usage notes and accessibility

min must be less than max; step must be positive and value must stay within bounds.
Values snap to a grid starting at min; max need not lie on that grid.
Null onChanged or disabled: true disables adjustments.

Constructor parameters

Required parameters are marked in the default column. Other parameters are optional.

WelkRangeSlider parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible slider label.
`value`	`double`	Required	Controlled numeric value.
`onChanged`	`ValueChanged<double>?`	null	Receives the requested snapped value.
`min`	`double`	0	Lower bound.
`max`	`double`	100	Upper bound.
`step`	`double`	1	Positive increment.
`disabled`	`bool`	false	Disables the slider.
`focusNode`	`FocusNode?`	null	Optional focus node to control focus.
`autofocus`	`bool`	false	Requests focus when first built.
`semanticFormatter`	`String Function(double)?`	null	Formats the value for assistive technology.

Project setup, theming and typography

WelkUI Flutter targets Android and iOS. It uses Dart widgets, not the React package or its CSS stylesheet. Defaults work without a theme wrapper.

Override shared colors and strokes with WelkTheme and immutable WelkThemeData:

Dart

WelkTheme(
  data: const WelkThemeData().copyWith(
    accent: const Color(0xFFFFD166),
    ink: const Color(0xFF202020),
    paper: const Color(0xFFFFFDF5),
  ),
  child: WelkButton(
    onPressed: () {},
    child: const Text('Your colors. WelkUI character.'),
  ),
)

The Short Stack font is bundled and registered by the package, so you don't need to declare font assets or download fonts at runtime. To use it outside the widgets:

Dart

const Text(
  'Made with WelkUI',
  style: TextStyle(
    fontFamily: 'ShortStack',
    package: 'welkui_flutter',
    fontSize: 20,
  ),
)