Skip to content

Commit

Permalink
feat: range, add reference point to start range slider at ionic-team#…
Browse files Browse the repository at this point in the history 
…24348

Added property barActiveStart. bar-active is shown between `barActiveStart` and knob for single knob range-bar. By default `barActiveStart` is set to `min` (Minimum integer value of the range).
  • Loading branch information
@sachingarg05
sachingarg05 committed Dec 14, 2021
1 parent 03dd372 commit ba7ba00
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 22 deletions.
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1290,13 +1290,13 @@ export declare interface IonRange extends Components.IonRange {

@ProxyCmp({
defineCustomElementFn: undefined,
inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
inputs: ['barActiveStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
})
@Component({
selector: 'ion-range',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
inputs: ['barActiveStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
})
export class IonRange {
protected el: HTMLElement;
Expand Down
1 change: 1 addition & 0 deletions core/api.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -961,6 +961,7 @@ ion-radio-group,prop,value,any,undefined,false,false
ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true

ion-range,shadow
ion-range,prop,barActiveStart,number,this.min,false,false
ion-range,prop,color,string | undefined,undefined,false,true
ion-range,prop,debounce,number,0,false,false
ion-range,prop,disabled,boolean,false,false,false
Expand Down
8 changes: 8 additions & 0 deletions core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2017,6 +2017,10 @@ export namespace Components {
"value"?: any | null;
}
interface IonRange {
/**
* bar-active is shown between `barActiveStart` and knob for single knob range-bar. Valid values are between `min` and `max`. By default `barActiveStart` is set to `min` (Minimum integer value of the range).
*/
"barActiveStart": number;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
Expand Down Expand Up @@ -5676,6 +5680,10 @@ declare namespace LocalJSX {
"value"?: any | null;
}
interface IonRange {
/**
* bar-active is shown between `barActiveStart` and knob for single knob range-bar. Valid values are between `min` and `max`. By default `barActiveStart` is set to `min` (Minimum integer value of the range).
*/
"barActiveStart"?: number;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
Expand Down
25 changes: 21 additions & 4 deletions core/src/components/range/range.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,13 @@ export class Range implements ComponentInterface {
this.ionChange.emit({ value });
}

/**
* bar-active is shown between `barActiveStart` and knob for single knob range-bar.
* Valid values are between `min` and `max`.
* By default `barActiveStart` is set to `min` (Minimum integer value of the range).
*/
@Prop() barActiveStart: number = this.min;

private clampBounds = (value: any): number => {
return clamp(this.min, value, this.max);
}
Expand Down Expand Up @@ -356,7 +363,7 @@ export class Range implements ComponentInterface {
if (this.dualKnobs) {
return Math.min(this.ratioA, this.ratioB);
}
return 0;
return valueToRatio(this.barActiveStart, this.min, this.max);
}

private get ratioUpper() {
Expand Down Expand Up @@ -429,8 +436,18 @@ export class Range implements ComponentInterface {
labelText = inheritedAttributes['aria-label'];
}
const mode = getIonMode(this);
const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;
let barStart = `${ratioLower * 100}%`;
let barEnd = `${100 - ratioUpper * 100}%`;

if (!this.dualKnobs) {
if (this.valA < this.barActiveStart) {
barStart = `${ratioUpper * 100}%`;
barEnd = `${100 - ratioLower * 100}%`;
} else {
barStart = `${ratioLower * 100}%`;
barEnd = `${100 - ratioUpper * 100}%`;
}
}

const doc = document;
const isRTL = doc.dir === 'rtl';
Expand All @@ -455,7 +472,7 @@ export class Range implements ComponentInterface {

const tick: any = {
ratio,
active: ratio >= ratioLower && ratio <= ratioUpper,
active: ratio >= Math.min(ratioLower, ratioUpper) && ratio <= Math.max(ratioLower, ratioUpper),
};

tick[start] = `${ratio * 100}%`;
Expand Down
33 changes: 17 additions & 16 deletions core/src/components/range/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,22 +348,23 @@ export default defineComponent({

## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ---------------------------------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `pinFormatter` | -- | A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. | `(value: number) => string \| number` | `(value: number): number => Math.round(value)` |
| `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` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ---------------------------------------------- |
| `barActiveStart` | `bar-active-start` | bar-active is shown between `barActiveStart` and knob for single knob range-bar. Valid values are between `min` and `max`. By default `barActiveStart` is set to `min` (Minimum integer value of the range). | `number` | `this.min` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `pinFormatter` | -- | A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. | `(value: number) => string \| number` | `(value: number): number => Math.round(value)` |
| `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` |


## Events
Expand Down
1 change: 1 addition & 0 deletions packages/vue/src/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -586,6 +586,7 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
'ticks',
'disabled',
'value',
'barActiveStart',
'ionChange',
'ionStyle',
'ionFocus',
Expand Down

0 comments on commit ba7ba00

Please sign in to comment.