Chromia UI provides two slider components for value selection: ChromiaSlider for single values and ChromiaRangeSlider for value ranges.
ChromiaSlider
A customizable slider component for selecting a single value from a range.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
double currentValue = 50.0;
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
onChanged: (value) => setState(() => currentValue = value),
)
With Labels
Display minimum and maximum labels:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
minLabel: '0',
maxLabel: '100',
onChanged: (value) => setState(() => currentValue = value),
)
With Value Display
Show the current value with a custom formatter:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
minLabel: '0',
maxLabel: '100',
valueBuilder: (value) => '${value.toInt()}%',
onChanged: (value) => setState(() => currentValue = value),
)
Discrete Steps
Create a slider with discrete divisions:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
divisions: 10, // Creates 11 discrete values (0, 10, 20, ...100)
label: '${currentValue.toInt()}',
onChanged: (value) => setState(() => currentValue = value),
)
Custom Colors
Customize the slider colors:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
activeColor: Colors.green,
inactiveColor: Colors.grey.shade300,
thumbColor: Colors.green.shade700,
onChanged: (value) => setState(() => currentValue = value),
)
Custom Track Height
Adjust the slider track height:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
trackHeight: 12,
onChanged: (value) => setState(() => currentValue = value),
)
Custom Thumb Size
Adjust the thumb (handle) size:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
thumbRadius: 16,
onChanged: (value) => setState(() => currentValue = value),
)
With Thumb Icon
Add an icon to the slider thumb:
ChromiaSlider(
value: volume,
min: 0,
max: 100,
thumbIcon: Icons.volume_up,
onChanged: (value) => setState(() => volume = value),
)
Disabled State
Disable the slider:
ChromiaSlider(
value: currentValue,
min: 0,
max: 100,
enabled: false,
onChanged: null,
)
ChromiaSlider Parameters
The current value of the slider.
onChanged
ValueChanged<double>?
required
Called when the value changes. Set to null to disable.
Number of discrete divisions. If null, slider is continuous.
Label to show above the slider thumb.
Label for minimum value (displayed below slider).
Label for maximum value (displayed below slider).
Color of the active portion of the slider.
Color of the inactive portion of the slider.
Color of the slider thumb.
Custom value formatter for display.
Whether the slider is enabled.
Height of the slider track.
Radius of the slider thumb.
Icon to display on the slider thumb.
Custom shape for the slider thumb.
ChromiaRangeSlider
A range slider for selecting a range of values.
Basic Usage
RangeValues currentRange = RangeValues(20, 80);
ChromiaRangeSlider(
values: currentRange,
min: 0,
max: 100,
onChanged: (values) => setState(() => currentRange = values),
)
With Value Display
Show the current range values:
ChromiaRangeSlider(
values: currentRange,
min: 0,
max: 100,
showValues: true,
onChanged: (values) => setState(() => currentRange = values),
)
With Custom Formatter
ChromiaRangeSlider(
values: priceRange,
min: 0,
max: 1000,
showValues: true,
valueBuilder: (value) => '\$${value.toInt()}',
onChanged: (values) => setState(() => priceRange = values),
)
Discrete Range
ChromiaRangeSlider(
values: currentRange,
min: 0,
max: 100,
divisions: 10,
labels: RangeLabels(
'${currentRange.start.toInt()}',
'${currentRange.end.toInt()}',
),
onChanged: (values) => setState(() => currentRange = values),
)
With Thumb Icons
Add icons to both thumbs:
ChromiaRangeSlider(
values: timeRange,
min: 0,
max: 24,
startThumbIcon: Icons.wb_sunny,
endThumbIcon: Icons.nightlight,
showValues: true,
valueBuilder: (value) => '${value.toInt()}:00',
onChanged: (values) => setState(() => timeRange = values),
)
Custom Colors
ChromiaRangeSlider(
values: currentRange,
min: 0,
max: 100,
activeColor: Colors.blue,
inactiveColor: Colors.grey.shade300,
showValues: true,
onChanged: (values) => setState(() => currentRange = values),
)
Disabled Range Slider
ChromiaRangeSlider(
values: currentRange,
min: 0,
max: 100,
enabled: false,
onChanged: null,
)
ChromiaRangeSlider Parameters
The current range values.
onChanged
ValueChanged<RangeValues>?
required
Called when the values change. Set to null to disable.
Number of discrete divisions.
Labels to show above the thumbs.
Color of the active portion.
Color of the inactive portion.
Whether to show the values below the slider.
Whether the slider is enabled.
Height of the slider track.
Radius of the slider thumbs.
Icon to display on the start thumb.
Icon to display on the end thumb.
Custom shape for the slider thumbs.
Use Cases
Volume Control
double volume = 50;
ChromiaSlider(
value: volume,
min: 0,
max: 100,
thumbIcon: Icons.volume_up,
minLabel: '0%',
maxLabel: '100%',
valueBuilder: (value) => '${value.toInt()}%',
onChanged: (value) {
setState(() => volume = value);
// Update audio volume
},
)
Price Range Filter
RangeValues priceRange = RangeValues(50, 500);
ChromiaRangeSlider(
values: priceRange,
min: 0,
max: 1000,
divisions: 20,
showValues: true,
valueBuilder: (value) => '\$${value.toInt()}',
onChanged: (values) {
setState(() => priceRange = values);
// Apply price filter
},
)
Brightness Control
double brightness = 0.7;
ChromiaSlider(
value: brightness,
min: 0,
max: 1,
thumbIcon: Icons.brightness_6,
divisions: 10,
onChanged: (value) {
setState(() => brightness = value);
// Update screen brightness
},
)
Age Range Selector
RangeValues ageRange = RangeValues(18, 65);
ChromiaRangeSlider(
values: ageRange,
min: 0,
max: 100,
showValues: true,
valueBuilder: (value) => '${value.toInt()} years',
labels: RangeLabels(
'${ageRange.start.toInt()}',
'${ageRange.end.toInt()}',
),
onChanged: (values) => setState(() => ageRange = values),
)
