Range Slider

[anderflash]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Range Slider

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.

[razvanmitre]

any news on this?

[mmalerba]

I don't think this is a priority for us since its not part of the material spec

[anderflash]

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.

[SvenBudak]

i really really hope, that they implement it... I know people who use ionic, only because in material is no range slider...

[arkhamvm]

Any news? Really nice to have.

[Tiedye]

+1 this is really important for a lot of applications

[mladilav]

Any news?

[chicojunior]

News about?

[troelssiggaard]

+1

[ghal]

+1

[alexlevy0]

• 1

[kaykhan]

+1

[dniadzelka]

+1

[franckie20]

+1

[odahcam]

Good inspiration:

• https://github.com/leongersen/noUiSlider
• https://codepen.io/davidchin/full/GpNvqw

---

<!-- auto range slider -->
<mat-slider values="[10, 22, ...]"></mat-slider>

<!-- explicit range slider -->
<mat-slider range values="[10, 22, ...]"></mat-slider>

[EdricChan03]

@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.

[Raphyyy]

Hi and sorry for the flood Any news on this ? It would be really nice to have, for many apps

[AndyInfin]

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)?

[Spawnrad]

I use primeng for the slider range. Hope material add it

[tsuyoshi-nishikawa]

Any news?

[odahcam]

This is not cool and not usual at all:

😞

[Spawnrad]

Its a low priority but very usefull for everyone :(

[tsuyoshi-nishikawa]

like this https://material.io/design/components/sliders.html#usage

[odahcam]

Finally it's on Material spec! 🎉

Ref: https://material.io/design/components/sliders.html#usage

[mmalerba]

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

[shivarajnaidu]

When we can expect range slider in angular material guys..?

[GeoffMahugu]

This feature is very important. Having 2 slides for max and min value is not a user experience i would want

[kevupton]

👍 🥇

[Kiennyo]

As an alternative I've found this component: https://www.primefaces.org/primeng/#/slider

[ankitminglani]

@Kiennyo but the styling is a struggle! were you able to make it look like angular material one or at least ionic?

[Dzivo]

Any news on this i see they have no plans for this in the docs

[PhilippS93]

Are there any news? Would love this feature.

[kluevandrew]

+1

[greggalbreath]

+1

[jonigl]

any news?

[odahcam]

Maybe you should see #13324

[HulinCedric]

Thanks @odahcam for your redirection 👍

[odahcam]

You're welcome.

[VagrantAI-c]

Seems like another concept passed through https://material.io/design/components/buttons-floating-action-button.html#extended-fab

[dinukasaminda]

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

[jelbourn]

(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.

[odahcam]

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.

[oktav777]

@AdditionAddict unfortunately no :( I need it so bad too...

[kirill-chirkov-at-clouty]

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---------------------------

[djabif]

I solved this issue by using the ion-range component from Ionic Framework. It's super easy to integrate to an angular project.

[SvenBudak]

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

[odahcam]

Our best hope is try to help https://github.com/angular/components/pull/13324

[PetrSchmeister]

I found this: https://stackblitz.com/edit/angular-material-range-slider-kxqxmq

[chriszrc]

@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]

I solved this issue by using the ion-range component 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?