Skip to content

feat(slider): allow configuring fill behavior #9170

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

Merged
merged 4 commits into from
Apr 23, 2024
Merged

feat(slider): allow configuring fill behavior #9170

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93ff1ca
feat(slider): allow configuring highlight behavior
jcfranco Apr 23, 2024
6524568
update API
jcfranco Apr 23, 2024
8095847
fix(date-picker): ensure proximitySelectionDisabled resets range on p…
jcfranco Apr 23, 2024
d2834f4
Revert "fix(date-picker): ensure proximitySelectionDisabled resets ra…
jcfranco Apr 23, 2024
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
8 changes: 8 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4193,6 +4193,10 @@ export namespace Components {
* When `true`, indicates a histogram is present.
*/
"hasHistogram": boolean;
/**
* Used to configure where the highlight is placed along the slider track. **Note**: range mode will always display range between min and max handles.
*/
"highlightMode": "default" | "none" | "mirrored";
/**
* A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
* @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)
Expand Down Expand Up @@ -11757,6 +11761,10 @@ declare namespace LocalJSX {
* When `true`, indicates a histogram is present.
*/
"hasHistogram"?: boolean;
/**
* Used to configure where the highlight is placed along the slider track. **Note**: range mode will always display range between min and max handles.
*/
"highlightMode"?: "default" | "none" | "mirrored";
/**
* A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
* @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)
Expand Down
17 changes: 17 additions & 0 deletions packages/calcite-components/src/components/slider/slider.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,3 +445,20 @@ export const spaceGroupSeparatorNoBreak_TestOnly = (): string => html`
ticks="2000"
></calcite-slider>
`;

export const highlightModes = (): string => html`
<label>default</label>
<calcite-slider min="0" max="100" value="0" highlight-mode="default"></calcite-slider>
<calcite-slider min="0" max="100" value="50" highlight-mode="default"></calcite-slider>
<calcite-slider min="0" max="100" value="100" highlight-mode="default"></calcite-slider>
<br />
<label>none</label>
<calcite-slider min="0" max="100" value="0" highlight-mode="none"></calcite-slider>
<calcite-slider min="0" max="100" value="50" highlight-mode="none"></calcite-slider>
<calcite-slider min="0" max="100" value="100" highlight-mode="none"></calcite-slider>
<br />
<label>mirrored</label>
<calcite-slider min="0" max="100" value="0" highlight-mode="mirrored"></calcite-slider>
<calcite-slider min="0" max="100" value="50" highlight-mode="mirrored"></calcite-slider>
<calcite-slider min="0" max="100" value="100" highlight-mode="mirrored"></calcite-slider>
`;
33 changes: 27 additions & 6 deletions packages/calcite-components/src/components/slider/slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,7 @@ export class Slider
*
* When not set, the component will be associated with its ancestor form element, if any.
*/
@Prop({ reflect: true })
form: string;
@Prop({ reflect: true }) form: string;

/**
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
Expand All @@ -93,6 +92,13 @@ export class Slider
/** When `true`, indicates a histogram is present. */
@Prop({ reflect: true, mutable: true }) hasHistogram = false;

/**
* Used to configure where the highlight is placed along the slider track.
*
* **Note**: range mode will always display range between min and max handles.
*/
@Prop({ reflect: true }) highlightMode: "default" | "none" | "mirrored" = "default";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment: Is there a better name for "default"? Otherwise, default doesn't really mean anything other than its the default whereas the others have some meaning to them.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"start" (default) / "end" / "none" ? There is also the separate mirrored property on Slider which might be confusing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"start" (default) / "end" / "none" ? There is also the separate mirrored property on Slider which might be confusing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Went with fillPlacement: "start" | "end" | "none" since meter introduces fill-related props, which would apply to slider too.


/**
* A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
*
Expand Down Expand Up @@ -281,6 +287,24 @@ export class Slider
mirror,
});

const { highlightMode } = this;
const trackRangePlacementStyles =
highlightMode === "none"
? {
left: `unset`,
right: `unset`,
}
: highlightMode === "mirrored"
? {
left: `${mirror ? minInterval : maxInterval}%`,
right: `${mirror ? maxInterval : minInterval}%`,
}
: /* default */
{
left: `${mirror ? 100 - maxInterval : minInterval}%`,
right: `${mirror ? minInterval : 100 - maxInterval}%`,
};

return (
<Host id={id} onKeyDown={this.handleKeyDown} onTouchStart={this.handleTouchStart}>
<InteractiveContainer disabled={this.disabled}>
Expand All @@ -301,10 +325,7 @@ export class Slider
<div
class={CSS.trackRange}
onPointerDown={this.onTrackPointerDown}
style={{
left: `${mirror ? 100 - maxInterval : minInterval}%`,
right: `${mirror ? minInterval : 100 - maxInterval}%`,
}}
style={trackRangePlacementStyles}
/>
<div class={CSS.ticks}>
{this.tickValues.map((tick) => {
Expand Down