Skip to content
Permalink
Browse files

feat(range): add ticks attribute (#17718)

closes #17717
  • Loading branch information...
sethlilly authored and brandyscarney committed Mar 26, 2019
1 parent 583c431 commit 016fa16d44ae38f9c50b79f1f3a671e7a58d0ac8
@@ -586,7 +586,7 @@ export class IonRadioGroup {
proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);

export declare interface IonRange extends StencilComponents<'IonRange'> {}
@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] })
@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value'] })
export class IonRange {
ionChange!: EventEmitter<CustomEvent>;
ionFocus!: EventEmitter<CustomEvent>;
@@ -598,7 +598,7 @@ export class IonRange {
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
}
}
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']);
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);

export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
@@ -805,6 +805,7 @@ ion-range,prop,name,string,'',false,false
ion-range,prop,pin,boolean,false,false,false
ion-range,prop,snaps,boolean,false,false,false
ion-range,prop,step,number,1,false,false
ion-range,prop,ticks,boolean,true,false,false
ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
ion-range,event,ionBlur,void,true
ion-range,event,ionChange,RangeChangeEventDetail,true
@@ -3332,6 +3332,10 @@ export namespace Components {
*/
'step': number;
/**
* If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
*/
'ticks': boolean;
/**
* the value of the range.
*/
'value': RangeValue;
@@ -3394,6 +3398,10 @@ export namespace Components {
*/
'step'?: number;
/**
* If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
*/
'ticks'?: boolean;
/**
* the value of the range.
*/
'value'?: RangeValue;
@@ -105,6 +105,12 @@ export class Range implements ComponentInterface {
*/
@Prop() step = 1;

/**
* If `true`, tick marks are displayed based on the step value.
* Only applies when `snaps` is `true`.
*/
@Prop() ticks = true;

/**
* If `true`, the user cannot interact with the range.
*/
@@ -393,7 +399,7 @@ export class Range implements ComponentInterface {
const end = isRTL ? 'left' : 'right';

const ticks = [];
if (this.snaps) {
if (this.snaps && this.ticks) {
for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max);

@@ -32,17 +32,21 @@ left or right of the range.
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
@@ -65,17 +69,21 @@ left or right of the range.
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
@@ -104,17 +112,21 @@ const Example: React.SFC<{}> = () => (
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>
<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem>
@@ -141,17 +153,21 @@ export default Example;
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
@@ -176,6 +192,7 @@ export default Example;
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `ticks` | `ticks` | If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`. | `boolean` | `true` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` |


@@ -98,6 +98,9 @@
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
@@ -92,6 +92,9 @@
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
@@ -11,21 +11,23 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
```


@@ -11,17 +11,21 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
@@ -17,17 +17,21 @@ const Example: React.SFC<{}> = () => (
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>
<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem>
@@ -12,22 +12,24 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
</template>
```


0 comments on commit 016fa16

Please sign in to comment.
You can’t perform that action at this time.