how to control slider value with buttons in flutter ui - flutter

Question

how to control slider with add and subtract buttons in flutter UI

Answer 1

Try this code :
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
double _currentSliderValue = 20;
int divisons=20;
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
setState(() {
_currentSliderValue -= divisons;
});
},
),
Text(_currentSliderValue.toString()),
IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
_currentSliderValue += divisons;
});
},
),
],
),
Slider(
value: _currentSliderValue,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
],
);
}
}
Hope this helps.

Answer 2

Simplified sample
class MyWidget extends StatefulWidget{
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int _value = 5;
double min = 1.0;
double max = 20.0;
#override
Widget build(BuildContext context) {
return Column(
children:[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
IconButton(onPressed:(){
setState((){
if(_value < max){
/// Add as many as you want
_value++;
}
});
}, icon: const Icon(Icons.add)),
IconButton(onPressed:(){
setState((){
if(_value > min){
/// Subtract as many as you want
_value--;
}
});
}, icon: const Icon(Icons.remove)),
]
),
Slider(
value: _value.toDouble(),
min: min,
max: max,
activeColor: Colors.green,
inactiveColor: Colors.orange,
label: 'Set volume value',
onChanged: (double newValue) {
setState(() {
_value = newValue.round();
});
},
),
]);
}
}

Answer 3

here I have made a demo on learning purpose, it might help u
class _SliderPageState extends State<SliderPage> {
double _currentSliderValue=15.0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(onPressed: (){
setState(() {
if(_currentSliderValue<100)
_currentSliderValue=_currentSliderValue+1;
});
}, icon: Icon(Icons.add)),
Text(_currentSliderValue.round().toString(),style: TextStyle(fontWeight: FontWeight.bold,fontSize: 24),),
IconButton(onPressed: (){
setState(() {
if(_currentSliderValue>1)
_currentSliderValue=_currentSliderValue-1;
});
}, icon: Icon(Icons.remove)),
],),
Slider(
value: _currentSliderValue,
max: 100,
divisions: 100,
//label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
],)
),
);
}
}