boeledi / rangeslider Goto Github PK
View Code? Open in Web Editor NEWRangeSlider Widget for Flutter
License: Other
RangeSlider Widget for Flutter
License: Other
Hi. This a feature request: I would like to have the ability to make custom divisions from values that I provide. To be able to select the color of each division would also be great.
The use case: I have geospatial timeseries that are divided by sections, where the slider represents a time period. Ideally I would like each section type (ex: movement or stop) to have it's own color code
Problem:
When you put a RangeSlider() underneath a default Slider(), the width doesn't match.
Possible solution
In class file, change line 520
static const double _overlayDiameter = _overlayRadius * 2.0;
static const double _overlayDiameter = _overlayRadius;
and at line 733 under the void performResize() {}
method to preserve the correct height
constraints.hasBoundedHeight ? constraints.maxHeight : _overlayDiameter,
constraints.hasBoundedHeight ? constraints.maxHeight : _overlayDiameter * 2,
But I'm not sure if it creates the wanted behavior for other cases, if you want I'll generate a pull request.
Awesome library and great documentation by the way my Wallonian friend, much appreciated!
Greetings from the north
Compiler message:
/D:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_range_slider-1.5.0/lib/src/flutter_range_slider.dart:1059:7:
Error: No named parameter with the name 'sizeWithOverflow'.
sizeWithOverflow: sizeWithOverflow,
guys please help me with this....!
Version 1.0.0 keeps throwing the following error:
I/flutter (19979): ══╡ EXCEPTION CAUGHT BY GESTURE LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (19979): The following NoSuchMethodError was thrown while dispatching a pointer event:
I/flutter (19979): The method 'toDouble' was called on null.
I/flutter (19979): Receiver: null
I/flutter (19979): Tried calling: toDouble()
I/flutter (19979):
I/flutter (19979): When the exception was thrown, this was the stack:
I/flutter (19979): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:46:5)
I/flutter (19979): #1 double.* (dart:core/runtime/libdouble.dart:26:23)
I/flutter (19979): #2 _RenderRangeSlider._validateActiveThumb (package:flutter_range_slider/src/flutter_range_slider.dart:1118:30)
I/flutter (19979): #3 _RenderRangeSlider.handleEvent (package:flutter_range_slider/src/flutter_range_slider.dart:1093:7)
I/flutter (19979): #4 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
I/flutter (19979): #5 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
I/flutter (19979): #6 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
I/flutter (19979): #7 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
I/flutter (19979): #8 _invoke1 (dart:ui/hooks.dart:134:13)
I/flutter (19979): #9 _dispatchPointerDataPacket (dart:ui/hooks.dart:91:5)
I/flutter (19979):
I/flutter (19979): Event:
I/flutter (19979): PointerDownEvent(Offset(323.3, 334.7))
I/flutter (19979): Target:
I/flutter (19979): _RenderRangeSlider#d76fd
I/flutter (19979): ════════════════════════════════════════════════════════════════════════════════════════════════════
I'm not a flutter expert but it seems like touchRadiusExpansionRatio
paramter isn't passed down the chain from RangeSlider -> _RangeSliderRenderObjectWidget -> ...
hi
i want to set slider range for money range! and i cant set value as decimal format! I think it was better set as String :\
If I slide both indicators for the range picker to the left most point I cannot slide the right indicator back to the right.
I'm not sure if this is the intended behaviour but it looks like it could be better. My work around is to detect this and change the value of the right indicator if this happens.
Hi,
I would like to use your package to restrict the number of Custom widgets (in a column) depending on the range choosen by the user.
So I used your "RangeSlider".
Unfortunatly, I have seriously performance problem during the movement of the cursor.
Even if I only put onChanged: (double newLowerValue, double newUpperValue) { setState(() { _lowerValue = newLowerValue; _upperValue = newUpperValue; }); }, )
the problem is still present.
I saw that if I show only 10 items (manually) of my Custom Widget, the problem disappear, if I show 20-30 it begins to be bad...
So the performance of the cursor moving is indirectly lied to the numbers of elements show on the same page.
It's the same with the default widget RangeSlider of Flutter.
Do you know why that is happens ?
Thank you in advance for your help !
HI,
Awesome package, are you going to upgrade to null sound safety?
Thanks
flutter_range_slider: ^1.2.0
When I override the slider theme track height, the standard Slider widget reflects the change, but the RangeSlider does not.
import 'package:flutter/material.dart';
import 'package:flutter_range_slider/flutter_range_slider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RangeSlider Demo',
theme: _buildTheme(context),
home: RangeSliderSample(),
);
}
ThemeData _buildTheme(BuildContext context) {
return ThemeData(
// https://docs.flutter.io/flutter/material/SliderThemeData-class.html
sliderTheme: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.green,
inactiveTrackColor: Colors.green,
trackHeight: 8.0, // ******** RangeSlider does not reflect track height customization
));
}
}
class RangeSliderSample extends StatefulWidget {
@override
_RangeSliderSampleState createState() => _RangeSliderSampleState();
}
class _RangeSliderSampleState extends State<RangeSliderSample> {
double _sliderValue = 50;
double _rangeLoValue = 25;
double _rangeHiValue = 50;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(title: Text('RangeSlider Demo')),
body: Container(
padding: const EdgeInsets.only(top: 50.0, left: 10.0, right: 10.0),
child: Column(children: [
Slider(
min: 1.0,
max: 100.0,
value: _sliderValue,
onChanged: (double newValue) {
setState(() {
_sliderValue = newValue;
});
},
),
SizedBox(height: 50),
RangeSlider(
min: 1.0,
max: 100.0,
lowerValue: _rangeLoValue,
upperValue: _rangeHiValue,
onChanged: ((double newLowerValue, double newUpperValue) {
setState(() {
_rangeLoValue = newLowerValue;
_rangeHiValue = newUpperValue;
});
}),
),
]),
),
),
);
}
}
The RangeSlider should reflect all slider theme customizations.
Hi,
I need to range my sider from min to max values.
If the max cursor is moved at the end of the track, the upperValue must be infinite.
Is it a simple way to do this and display to the user on the live value indicator that he's selecting max and upper values?
I can't setState on onChanged method for performance needs.
In perfect world, I would live have 1 to 5, and if the user move the cursor after 5, the upperValue should be inifinite and it should be writted on the value indicator.
Thank you for your help !
If both sliders are moved toward the same position with a small amount of discrete divisions, the thumbs will overlap as expected.
If the same is done with a larger number of divisions (enough so that the overlays collide) the thumbs will not overlap.
Continuous slider thumbs never overlap and, if the range is large enough, will not even explore all of the possibilities of the slider.
I am unsure if the lack of continuous overlapping is by design or not, but I believe the discrete behavior inconsistencies to be a bug. Upon initial observations, collision seems to be determined upon if the thumb shapes themselves are colliding, which causes problems when the divisions are smaller than the size of the thumb shape.
A demonstration of this behavior derived from your example is below:
import 'package:flutter/material.dart';
import 'package:flutter_range_slider/flutter_range_slider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RangeSlider Collision Bug',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RangeSliderSample(),
);
}
}
class RangeSliderSample extends StatefulWidget {
@override
_RangeSliderSampleState createState() => _RangeSliderSampleState();
}
class _RangeSliderSampleState extends State<RangeSliderSample> {
double _goodLowerValue = 1.0;
double _goodUpperValue = 11.0;
double _badLowerValue = 1.0;
double _badUpperValue = 12.0;
double _continuousLowerValue = 1.0;
double _continuousUpperValue = 50.0;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
title: Text('RangeSlider Demo'),
),
body: Container(
padding: const EdgeInsets.only(
top: 50.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
Text(
'Good',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_goodLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 11.0,
lowerValue: _goodLowerValue,
upperValue: _goodUpperValue,
divisions: 11,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_goodLowerValue = newLowerValue;
_goodUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Good - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Good - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_goodUpperValue.toInt()}',
),
),
],
),
Text(
'Bad',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_badLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 12.0,
lowerValue: _badLowerValue,
upperValue: _badUpperValue,
divisions: 12,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_badLowerValue = newLowerValue;
_badUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Bad - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Bad - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_badUpperValue.toInt()}',
),
),
],
),
Text(
'Continuous',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_continuousLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 50.0,
lowerValue: _continuousLowerValue,
upperValue: _continuousUpperValue,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_continuousLowerValue = newLowerValue;
_continuousUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Continuous - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Continuous - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_continuousUpperValue.toInt()}',
),
),
],
),
],
),
),
),
);
}
}
Let me know if any part of this is unclear, thanks.
I just updated Flutter, and now i got this error, before it was working well
How do I get the slider to maintain state? I am using the slider in a SimpleDialog and want the min and max values updated when a user opens/closes the dialog.
I attempted to create a double variable for both min and max, then update those variables after the user has closed the dialog using shared_preferences
. However, after the slider has the min and max variables assigned, if I drag the slider I immediately get the exception:
Code:
double rentMin = 500.0;
double rentMax = 3000.0;
RangeSlider(
min: rentMin,
max: rentMax,
lowerValue: _lowerValue,
upperValue: _upperValue,
showValueIndicator: false,
valueIndicatorMaxDecimals: 2,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_lowerValue = newLowerValue;
_upperValue = newUpperValue;
});
},
onChangeStart:(double startLowerValue, double startUpperValue) {
print('Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd: (double newLowerValue, double newUpperValue) {
print('Ended with values: $newLowerValue and $newUpperValue');
},
),
Upon dialog close I have a method that assigns the value of _lowerValue
to rentMin
and _upperValue
to rentMax
.
the plugin not work with the new version of flutter : v1.5.7
Hi
How can I format the value of indicator ? for example separate them by 3 digits
Its not actually a issue but a question.
I want to build the range slider widget similar to the picture.
I tried customizing library but I could not make it just like the image.
I was able to change the colors and slider line thickness but not able to change left and right thumb radius.
Anyone here knows how can I customize it so that it fits my need? Any suggestion is appreciated.
This can be a nice addition, colors for active and non active areas
Hi, thanks for a great plugin! I'm using this in a project which we're migrating to AndroidX. Is this plugin already migrated? I couldn't find any info in the changelog on pub...
I am just beginning to work with the RangeSlider widget. When trying to render a simple RangeSlider, encountering the following:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following NoSuchMethodError was thrown during paint():
The getter 'isEmpty' was called on null.
Receiver: null
Tried calling: isEmpty
When the exception was thrown, this was the stack:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 RoundSliderThumbShape.paint (package:flutter/src/material/slider_theme.dart:2395:30)
#2 _RenderRangeSlider._paintThumbs (package:flutter_range_slider/src/flutter_range_slider.dart:1043:29)
#3 _RenderRangeSlider.paint (package:flutter_range_slider/src/flutter_range_slider.dart:914:5)
#4 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#5 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#6 RenderShiftedBox.paint (package:flutter/src/rendering/shifted_box.dart:72:15)
#7 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#8 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#9 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2525:15)
#10 RenderFlex.paint (package:flutter/src/rendering/flex.dart:969:7)
#11 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#12 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#13 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2525:15)
#14 RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:406:5)
#15 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#16 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#17 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
#18 _RenderInkFeatures.paint (package:flutter/src/material/material.dart:533:11)
#19 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#20 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#21 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
#22 PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:393:12)
#23 RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:1821:15)
#24 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#25 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#26 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
#27 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#28 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:186:13)
#29 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
#30 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2266:7)
#31 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:137:11)
#32 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:97:5)
#33 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:982:29)
#34 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:406:19)
#35 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:867:13)
#36 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
#37 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15)
#38 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1056:9)
#39 SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:865:7)
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)
The following RenderObject was being processed when the exception was fired: _RenderRangeSlider#32f2f:
creator: _RangeSliderRenderObjectWidget ← RangeSlider ← SliderTheme ← Padding ← Container ← Column ←
_BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
AnimatedBuilder ← DefaultTextStyle ← ⋯
parentData: offset=Offset(20.0, 20.0) (can use size)
constraints: BoxConstraints(0.0<=w<=374.0, 0.0<=h<=Infinity)
size: Size(374.0, 32.0)
This RenderObject has no descendants.
In RoundSliderThumbShape.paint, it is expecting an argument of type Size called sizeWithOverflow which is not being passed.
Loving the work you've done here. I've been using your project and it's pretty awesome. Just wanted to bring up something that's been bugging me a bit - the license format.
Having a clear license is super important and makes it easy for everyone to know where they stand. I noticed that your license info is not so clear. Could you guys make it simpler to understand? Maybe in the readme file or somewhere else in the docs?
By the way, ever thought about monetizing your SDK/API with Eartho? It helps with setting up license-based billing super easily. Might be something to check out.
In version 1.4.0 when you overlap the two thumbs settling them in the same value you can't select a higher value anymore, just a lower one.
Steps to reproduce:
When I click any thumb, the indicator does not show the current value.
RangeSlider(
min: 0,
max: 120,
lowerValue: 0,
upperValue: 10,
divisions: 120,
showValueIndicator: true,
valueIndicatorFormatter: (index, value) => DateFormat('MMMM y')
.format(DateTime.now().add(Duration(days: 30 * value.toInt()))),
onChanged: (_, __) {},
),
Click any thumb without moving it. The indicator will be blank.
After moving the thumb, it works as expected.
The indicator should always show the current value.
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter_range_slider: ^1.1.0
Hi,
I'm trying to use the range slider but I can't seem to move any of the thumb.
This is the code I have dropped on a widget:
RangeSlider(
lowerValue: snapshot.data.priceRange.low,
upperValue: snapshot.data.priceRange.high,
max: 1000000.0,
min: 100000.0,
divisions: 19,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double lower, double upper) {
filterEditBloc.onPriceRangeChanged.add(Range(low: lower,high: upper));
},
),
I can see the thumbs, they are correclty positionned but I cannot move them? The onChanged is never triggered :( Any idea?
Thanks
This is the issue i am faced... i dont know how to solve it....
is there any solution to present RangeSlider
in right to left direction?
Hi Didier,
Is it possible to always show the label with the min/max values on top of cursor.
Currently for me with :
SliderTheme( data: SliderTheme.of(context).copyWith( trackHeight: 5.0, showValueIndicator: ShowValueIndicator.always), child: frs.RangeSlider( min: 1, max: 5, lowerValue: _lowerValue, upperValue: _upperValue, showValueIndicator: true, valueIndicatorMaxDecimals: 2, // divisions: 50, onChanged: (double newLowerValue, double newUpperValue) {}, onChangeEnd: (double newLowerValue, double newUpperValue) { setState(() { _lowerValue = newLowerValue; _upperValue = newUpperValue; }); }, )),
the labels are displayed only when I move the cursor.
I would like to show these labels everytime.
Thank you for your help.
Hi,
I installed the packaged but I can not use it, I always get Target Uri error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.