Feat: Range slider with float step size

[basvdijk]

The new range slider is awesome. I am using it to quickly rate objects. It looks like is not possible to set the step value to a float. For a rating value between 1 and 10 it would be great to set the step value at 0.5.

[manucorporat]

I agree with you, in the mean time, as a workaround, you could just use a wider range, let's say between 0 and 1000 and then divide the step by 1000. so you have a float step size of 0.001.

[adamdbradley]

Yeah good call. I used Math.round() everywhere to prevent crazy awesome JavaScript 6.9999999998 numbers, but it should have a smarter method to both clean up the number, and also allow for decimals.

[basvdijk]

👍 Great! Thanks for looking into this!

[PAFsec]

Hi !

Where is the state of that enhancement ? Is it going to be included in RC3 ?

On my side, I temporarely edited the component node_modules/ionic-angular/components/range.js, and more specificaly the function Range.prototype.ratioToValue at the lines 372 and 373, and put instead :

        ratio = (((this._max - this._min) * ratio)).toFixed(1);
        ratio = ((ratio / this._step) * this._step + this._min).toFixed(1);     

You can change 1 by the number of decimals you want.

On that note there should be a decimal option in which by default gives you 0 decimal, but can be manually changed.

Have a great day.

[manucorporat]

@PAFsec right now ionic 2 is feature frozen, until 2.0 final is released.
do you have any proposal about how this should be implemented and/or which API should we provide?

[PAFsec]

I think an optional input property called "decimal" (like the already existing one max, main) that would let the developper decide how many decimals he/she wants to have (defaulted to the value "0") should be sufficient.

What do you think ?

[manucorporat]

I like it, simple, easy, powerful and back compatible.

how about resolution?

[PAFsec]

For the name of the input ?
I honnestly am OK for whatever name :)

[manucorporat]

@PAFsec could you try to submit a PR? I would review it

[PAFsec]

Why not !
I will try to do that. I will keep you posted !

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#110

[PAFsec]

any news concerning that feature ?

[PAFsec]

With recent release, the temporary workaround does not properly work anymore.
Indeed, it is possible to observe some shaky behaviour of the slider/knob.

Does anyone have suggestions ?

[viki53]

Any news on this feature? Can the issue be re-opened?

Native browser range inputs handle this behavior, Ionic should at least provide the same level of functionalities…

---

I'm having the same issue and the workaround is not an option when using the pin option as the shown value would not be the one the user expects.

If it helps, I'm trying to do something a little excentric: a 0-20 slider with steps of 1, which turns into a 0-2 range with 0.25 steps when the value is under 2.

My current code looks like this:

<ion-item no-lines *ngIf="quantity < 2">
	<ion-range min="0" max="2" step="0.25" snaps="true" pin="true" [(ngModel)]="quantity">
		<ion-label range-left>0</ion-label>
		<ion-label range-right>2</ion-label>
	</ion-range>
</ion-item>
<ion-item no-lines *ngIf="quantity >= 2">
	<ion-range min="0" max="20" step="1" snaps="true" pin="true" [(ngModel)]="quantity">
		<ion-label range-left>0</ion-label>
		<ion-label range-right>20</ion-label>
	</ion-range>
</ion-item>

Also tried this before (similar result):

<ion-item no-lines>
	<ion-range min="0" [max]="quantity < 2 ? 2 : 20" [step]="quantity < 2 ? 0.25 : 1" snaps="true" pin="true" [(ngModel)]="quantity">
		<ion-label range-left>0</ion-label>
		<ion-label range-right>{{ quantity < 2 ? 2 : 20 }}</ion-label>
	</ion-range>
</ion-item>

[ionitron-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.