Range Slider

[adamdbradley]

Allow multiple knobs

[Chuckv01]

Are there plans in v2 to include a range slider similar to the Ionic 1 range slider (single knob)?

[wanjungao]

Agree. Need a slider, a common useful component.

[astopo]

+1

[Fenkiou]

+1

[beachygreg]

+1

[alexhulbert]

Does anyone know of an ETA or easy substitute for this feature? My app requires a native-looking range element.

[astopo]

@Taconut I ended up using this polyfill: http://rangeslider.js.org. You can call it in ngAfterViewInit() on your range inputs and add custom css to make it look smaller, etc.

[alexhulbert]

@astopo Alright, thanks. That library should make things a bit less messy.

[astopo]

@Taconut if you come across a better solution, please do share. That library does unfortunately rely on jQuery.

[phoenixgao]

@astopo I've just copied all css styles for .range input from ionic 1 to ionic 2 and it works. The only problem is when I bind a number type model to this <input type="range"> it gets a string when onchange is fired. it might be a bug in ng2 though.

[alexhulbert]

@pheonixgao Mind sharing your work? I looked into doing that myself, but it seemed like a rather messy transition.

[JoaoMosmann]

@Taconut You can copy from here all selectors with .range. Worked like a charm

[alexhulbert]

@JoaoMosmann Thanks! For anyone who wants to do this themselves, running the following code on the page eliminates the need to pick through the selectors manually: document.body.innerText.match(/(^.*\.range.*{[^{}]+})/mg).join('\n')

[kentr]

@astopo Did you apply it to a two-value use (where the user can choose both the bottom and top end of the range)? All of the examples appear to be for choosing a single value.

For a two-value version, there's this: https://github.com/danielcrisp/angular-rangeslider

[astopo]

@kentr no it was for a single value :) @phoenixgao thanks!

[arctushar]

Please add range component in ionic2

[mburger81]

yea please add a range componente :+1:

[zywh]

+1

[tpruthi]

+1

[brandyscarney]

Thanks for the feedback everyone! This will be in the beta 8 release. There are a lot of changes in this release so please make sure to read the changelog when it releases. Thanks! :smile:

Here's a preview of it for ios, material design, and windows:

[megharajdeepak]

Can we add custom label tooltips (instead of showing numbers) when we change the slider? I wanted to use it for 'Office hours' (from 9AM to 6PM). I wanted to show a slider with 2 knobs. It starts at '7AM' and ends at '10PM' and user can select a range. When user changes the slider, the tool should show selected time like 9AM, 10AM etc. But tooltip always shows number, which is what I want to customise.

Thanks for Awesomionic!

[brandyscarney]

@megharajdeepak Could you create a new issue for this as a feature request please? :)

[megharajdeepak]

Sure, I'll do that. Any work arounds or hacks to get it work for now?

[ryaa]

@megharajdeepak I think as a temporary solution you may want to use ionChange, there get a handle to pin html element and replace the value there.. looks ugly but may work as a temporary solution.....

[JaneDawson]

Is anything like this suggestion of @megharajdeepak planned? I would love to use the slider component for choosing times, as well. Any chance you can change the format of the number shown in the pin?

[mburger81]

@megharajdeepak did you opened a new issue for a feature request? Can you please link it here?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.