fix(range): value changes when using keyboard

fixes #15065
This commit is contained in:
Manu Mtz.-Almeida
2018-08-07 02:33:21 +02:00
parent f49fa4a815
commit 27fdc9a893
3 changed files with 9 additions and 6 deletions

View File

@ -41,6 +41,7 @@ import {
PickerOptions, PickerOptions,
PopoverOptions, PopoverOptions,
RangeInputChangeEvent, RangeInputChangeEvent,
RangeValue,
RouteID, RouteID,
RouterDirection, RouterDirection,
RouterEventDetail, RouterEventDetail,
@ -1798,7 +1799,7 @@ declare global {
/** /**
* the value of the range. * the value of the range.
*/ */
'value': any; 'value': RangeValue;
} }
interface IonRefresherContent { interface IonRefresherContent {
@ -5356,7 +5357,7 @@ declare global {
/** /**
* the value of the range. * the value of the range.
*/ */
'value'?: any; 'value'?: RangeValue;
} }
export interface IonRefresherContentAttributes extends HTMLAttributes { export interface IonRefresherContentAttributes extends HTMLAttributes {

View File

@ -12,6 +12,8 @@
flex: 1; flex: 1;
align-items: center; align-items: center;
user-select: none;
} }
::slotted(ion-label) { ::slotted(ion-label) {

View File

@ -1,10 +1,10 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, StyleEvent } from '../../interface'; import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, RangeValue, StyleEvent } from '../../interface';
import { clamp, debounceEvent, deferEvent } from '../../utils/helpers'; import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme'; import { createColorClasses, hostContext } from '../../utils/theme';
import { Knob, RangeEventDetail, RangeValue } from './range-interface'; import { Knob, RangeEventDetail } from './range-interface';
@Component({ @Component({
tag: 'ion-range', tag: 'ion-range',
@ -106,8 +106,7 @@ export class Range implements BaseInput {
/** /**
* the value of the range. * the value of the range.
*/ */
@Prop({ mutable: true }) @Prop({ mutable: true }) value: RangeValue = 0;
value: any = 0;
@Watch('value') @Watch('value')
protected valueChanged(value: RangeValue) { protected valueChanged(value: RangeValue) {
if (!this.noUpdate) { if (!this.noUpdate) {
@ -172,6 +171,7 @@ export class Range implements BaseInput {
} else { } else {
this.ratioB += step; this.ratioB += step;
} }
this.updateValue();
} }
private getValue(): RangeValue { private getValue(): RangeValue {