How can I keep float numbers for step in ion-range

Ionic Framework ionic-v3
1

Hi All,

I have created a range slider with the following configuration.

   <ion-range min="1" max="5" step="0.5" pin="true" [(ngModel)]="add_rating" color="secondary">
    <ion-icon range-left small name="add_rating"></ion-icon>
    <ion-icon range-right name="add_rating"></ion-icon>
  </ion-range>

But the slider is not stepping from 1 to 1.5 when Iam moving

2

Hey @harinirapra

There is a discussion about this feature just here : https://github.com/driftyco/ionic/issues/6812

On my side, i fixed it with a new component, itā€™s a little bit tricky, but itā€™s works !

import { Component, ViewChild, Input } from '@angular/core';
import { Range } from 'ionic-angular';

@Component({
  selector: 'float-range',
  template: `
      <ion-range #range [min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps"></ion-range>
      `
})
export class FloatRangeComponent {

  @Input() max: number;
  @Input() min: number;
  @Input() pin: boolean;
  @Input() step: number;
  @Input() snaps: boolean;

  @ViewChild('range')
  set range(range: Range) {
    let floatRange: FloatRangeComponent = this;
    range.ratioToValue = function(ratio: number) {
      this._step = Math.round(floatRange.step * 100) / 100;
      ratio = (this._max - this._min) * ratio;
      ratio = (ratio / this._step) * this._step + this._min;
      return Math.round(ratio * ( 1 / this._step)) / ( 1 / this._step);
    }
  }
}

Then use this component in your template like this (donā€™t forget to import it in the ngModule class):
<float-range min="0" max="5" pin="true" step="0.5" snaps="true"></float-range>

3

Hi Jahdere,

Thanks for sharing your component.

I have a problem with range.ratioToValue which return an error ā€œProperty ā€˜ratioToValueā€™ does not exist on type ā€˜Rangeā€™ā€.
Do you know how to solve this error? I am new in ionic.

import { Component, ViewChild, Input } from '@angular/core';
import { Range } from 'ionic-angular';

@Component({
  selector: 'float-range',
  template: '<ion-range #range [min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps"></ion-range>'
   
})
export class FloatRangeComponent {

  @Input() max: number;
  @Input() min: number;
  @Input() pin: boolean;
  @Input() step: number;
  @Input() snaps: boolean;

  @ViewChild('range')
  set range(range: Range) {
    let floatRange: FloatRangeComponent = this;
    range.ratioToValue = function(ratio: number) {
      this._step = Math.round(floatRange.step * 100) / 100;
      ratio = (this._max - this._min) * ratio;
      ratio = (ratio / this._step) * this._step + this._min;
      return Math.round(ratio * ( 1 / this._step)) / ( 1 / this._step);
    }
  }
}
1 Like
4

Hey @bcouto,

Iā€™m not sure because i didnā€™t upgrade my App yet, but try to replace range.ratioToValue to range._ratioToValue (the attribute name changed few release ago)

5

hi,
Runtime Error when using ngModel on float-range component. :
No value accessor for form control with unspecified name attribute

6

Hi there i wanted to use your solution to increment by 0.25 but i m unable to use ngModel on it to get the float-range value.
here is my element working but itā€™s incrementing by 1 :

<ion-range class="note-range" min="0" max="20" step="0.5" [(ngModel)]="item.note" color="secondary" (ionChange)="noteChanged($event)">
    <ion-label range-left>0</ion-label>
    <ion-label range-right>20</ion-label>
 </ion-range>

i added the component like u said but when i use it like above :

<float-range class="note-range" min="0" max="20" step="0.5" [(ngModel)]="item.note" color="secondary" (ionChange)="noteChanged($event)">
    <ion-label range-left>0</ion-label>
    <ion-label range-right>20</ion-label>
 </float-range>

i am having an error

Runtime Error when using ngModel on float-range component. : No value accessor for form control with unspecified name attribute

i tried many solutions but nothing worked.

7

Hej Guys,

just pipe your value for your ngModel via input from the float-range to the ion-range component!

<float-range [_ngModel]="item.value"></float-range>

In your float-range component bind your input to the ngModel of the ion-range:

...
@Component({
  selector: 'float-range',
  template: `<ion-range #range [min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps" [(ngModel)]="_ngModel" (ionBlur)="onValueChange($event);" ngDefaultControl></ion-range>`
})
export class FloatRangeComponent {

  @Input() max: number;
  @Input() min: number;
  @Input() pin: boolean;
  @Input() step: number;
  @Input() snaps: boolean;
  @Input() _ngModel: any;
...