Bug, feature request, or proposal:
Feature request
What is the expected behavior?
What is the current behavior?
We manipulate a single value.
What are the steps to reproduce?
Not applicable
What is the use-case or motivation for changing an existing behavior?
For input a range (start and end) besides just one value. Currency, date, time... several motivations.
Which versions of Angular, Material, OS, browsers are affected?
Latest
Is there anything else we should know?
I think JQuery UI also could be a good source of new UI features for material2.
anderflash
All 59 comments
any news on this?
razvanmitre
on 7 Dec 2016
I don't think this is a priority for us since its not part of the material spec
mmalerba
on 7 Dec 2016
I understand. It would be considered a future enhancement. I see Ionic Range could be a good inspiration (there is an example - see _structure_ field). And it's on top of Angular 2.
anderflash
on 7 Dec 2016
i really really hope, that they implement it... I know people who use ionic, only because in material is no range slider...
SvenBudak
on 25 Jan 2017
Any news? Really nice to have.
arkhamvm
on 3 May 2017
+1 this is really important for a lot of applications
Tiedye
on 14 Jul 2017
Any news?
mladilav
on 19 Sep 2017
News about?
chicojunior
on 16 Oct 2017
+1
troelssiggaard
on 2 Nov 2017
+1
ghal
on 4 Dec 2017
- 1
alexlevy0
on 6 Dec 2017
+1
KKHAN1991
on 6 Dec 2017
+1
dniadzelka
on 14 Dec 2017
+1
franckie20
on 27 Dec 2017
Good inspiration:
<!-- auto range slider -->
<mat-slider values="[10, 22, ...]"></mat-slider>
<!-- explicit range slider -->
<mat-slider range values="[10, 22, ...]"></mat-slider>
odahcam
on 29 Dec 2017
@troelssiggaard @ghal @alexlevy0 @KKHAN1991 @hatem20 @dniadzelka @franckie20 Please don't spam others who have watched this repository with +1s. Just click on the thumbs up emoji on the top post.
EdricChan03
on 29 Dec 2017
Hi and sorry for the flood
Any news on this ? It would be really nice to have, for many apps
Raphyyy
on 13 Feb 2018
After 1,5 years of this issue opened, MD2 still don't have it? Really?
Maybe someone have a custom realisation of this component (CDK, huh)?
AndyInfin
on 7 Mar 2018
I use primeng for the slider range. Hope material add it
Spawnrad
on 18 Apr 2018
Any news?
cony029
on 24 May 2018
This is not cool and not usual at all:
馃槥
odahcam
on 24 May 2018
Its a low priority but very usefull for everyone :(
Spawnrad
on 25 May 2018
cony029
on 27 May 2018
Finally it's on Material spec! 馃帀
Ref: https://material.io/design/components/sliders.html#usage
odahcam
on 27 May 2018
Bumping the priority since this is part of the spec now. FYI to everyone watching this thread: you may want to follow https://github.com/angular/material2/issues/10774 as well, as it's a pre-req to making the material version
mmalerba
on 29 May 2018
When we can expect range slider in angular material guys..?
shivarajnaidu
on 20 Jul 2018
This feature is very important. Having 2 slides for max and min value is not a user experience i would want
GeoffMahugu
on 22 Aug 2018
馃憤 馃
kevupton
on 31 Aug 2018
As an alternative I've found this component:
https://www.primefaces.org/primeng/#/slider
Kiennyo
on 5 Sep 2018
@Kiennyo but the styling is a struggle! were you able to make it look like angular material one or at least ionic?
ankitminglani
on 10 Sep 2018
Any news on this i see they have no plans for this in the docs
Dzivo
on 17 Sep 2018
Are there any news? Would love this feature.
PhilippS93
on 24 Sep 2018
+1
kluevandrew
on 16 Oct 2018
+1
greggalbreath
on 24 Oct 2018
any news?
jonigl
on 9 Nov 2018
Maybe you should see #13324
odahcam
on 9 Nov 2018
Thanks @odahcam for your redirection 馃憤
HulinCedric
on 9 Nov 2018
You're welcome.
odahcam
on 4 Jan 2019
Seems like another concept passed through
https://material.io/design/components/buttons-floating-action-button.html#extended-fab
VagrantAI-c
on 2 Feb 2019
use my range slider its based on angular material slider and its modifed, with sample angular application
https://github.com/dinukasaminda/angular-material-range-slider
dinukasaminda
on 11 Mar 2019
(I'm going through the highest voted issues today an commenting on their status)
We still consider this something that we want to add, but it's still one of the lower-priority features in the backlog (compared to things like virtual scrolling for table, density theming, improving CDK documentation, etc.). As I mentioned in my recent ng-conf talk, we're doing some work now to integrate MDC Web into our components, so we don't want to rework our slider to support range selections knowing that the MDC implementation also doesn't support this yet.
jelbourn
on 18 May 2019
Good to see MDC is comming, I hope this change to reduce the amount of work for you guys, so you can create more awesome stuff.
odahcam
on 18 May 2019
@AdditionAddict unfortunately no :(
I need it so bad too...
oktav777
on 4 Jul 2019
Seems like even Flutter now got range slider. I wonder if this would bump range slider dev priority.
https://medium.com/flutter/announcing-flutter-1-7-9cab4f34eacf
https://github.com/flutter/flutter/pull/31681?source=post_page---------------------------
kirill-chirkov-at-clouty
on 19 Jul 2019
I solved this issue by using the ion-range component from Ionic Framework.
It's super easy to integrate to an angular project.
djabif
on 30 Jul 2019
Read the comment from the guy above me... Did you guys remember what i wrote before 2 years?
https://github.com/angular/components/issues/1331#issuecomment-275187044
SvenBudak
on 30 Jul 2019
Our best hope is try to help https://github.com/angular/components/pull/13324
odahcam
on 31 Jul 2019
PetrSchmeister
on 2 Oct 2019
@PetrSchmeister yes, it uses:
https://angular-slider.github.io/ng5-slider/
EDIT - Seems like reactive form control support is broken for this with two sliders :(
This looks like the way to go for now! Thanks!
chriszrc
on 7 Jan 2020
I solved this issue by using the
ion-rangecomponent from Ionic Framework.
It's super easy to integrate to an angular project.
@djabif I actually am not finding it easy to just integrate a single component from ionic into an already existing angular project, do you have any tutorials or instructions for that?
chriszrc
on 16 Jan 2020
- working stackblitz mat-range-slider
- material only
- same API surface as
mat-slider - I want to wrap it in a library when I find time.
andreElrico
on 1 Jun 2020
I ended up using this one:
https://www.primefaces.org/primeng/showcase/#/slider
It was easy to just add that one component, but it's also a bit broken with reactive forms :(
chriszrc
on 1 Jun 2020
Any milestone when this can be included? Maybe for 10.1 or 11?
Flutter Material got this already, before Angular Material that is now in version 10 :/
francovp
on 15 Jul 2020
Flutter got a new updated Range Slider today :)
francovp
on 6 Aug 2020
any updates? We are waiting for a range slider :)
Volftsun
on 11 Oct 2020
+1
kuatek
on 27 Oct 2020
@wagnermaciel super excited to see this get assigned to you! Any chance that means you're working this?
M1Joe
on 5 Mar 2021
This is being added as part of the MDC-based slider that's currently in progress.
jelbourn
on 8 Mar 2021
Waiting for range slider. :)
patrickacioli
on 18 Mar 2021
Related issues
dzrust
路
3Comments
savaryt
路
3Comments
crutchcorn
路
3Comments
kara
路
3Comments
xtianus79
路
3Comments
Most helpful comment
+1 this is really important for a lot of applications