Skip to content

feat: range, add reference point to start range slider at #24348 #24399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

feat: range, add reference point to start range slider at #24348 #24399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba7ba00
feat: range, add reference point to start range slider at #24348
sachingarg05 Dec 14, 2021
5e3cc99
Added e2e test for - feat: range, add reference point to start range …
sachingarg05 Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
10 changes: 10 additions & 0 deletions core/src/components/range/test/bar-active/e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';

test('range: bar-active', async () => {
const page = await newE2EPage({
url: '/src/components/range/test/bar-active?ionic:_testing=true'
});

const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
Loading