Ion-range error: No value accessor for ''

Ionic Framework ionic-v3
1

HTML code:

<ion-item>
    <ion-range min="2" max="10" pin="true" snaps="true" [(ngModel)]="scanTime" favorite>
      <ion-icon range-left small name="timer"></ion-icon>
      <ion-icon range-right name="timer"></ion-icon>
    </ion-range>
  </ion-item>

This post indicates that I need to import {Range} from 'ionic-angular' as well as add it as a directive:

@Page({
  templateUrl: 'build/pages/bluetooth/bluetooth.html',
  directives: [Range]
})

But that only gave the error “Unexpected directive value ‘undefined’ on the View of component ‘BluetoothPage’”

1 Like
2

Assuming you’re using a relatively recent Ionic version, you missed some upgrade notes, notably that @Page was recalled to his home planet. Use @Component instead.

3

In my case, I was getting this error because I was importing FORM_DIRECTIVES from '@angular/common

Probably because of this

since alpha 46, where PLATFORM_DIRECTIVES was introduced, you don’t need to explicitely import FORM_DIRECTIVES, nor CORE_DIRECTIVES. Those are included implictely in your app. PLATFORM_DIRECTIVES contains COMMON_DIRECTIVES by default, which contains CORE_DIRECTIVES and FORM_DIRECTIVES.
https://github.com/angular/angular/issues/3953#issuecomment-196893364)