Skip to content

Commit

Permalink
Mj.dual range slider (#1148)
Browse files Browse the repository at this point in the history 
* wip: dual range slider styles working

* refactor(slider): start and end val props, remove range prop

* fix(slider): dual range no longer disappears at 0

* test: commit index for dep prev

* feat(slider): slider styling persists when thumbs swap in dual mode

* chore(slider): code cleanup

* wip: strict prop

* chore(slider): cleanup

* wip: slightly better strict prop

* test

* style(slider): removed datalist attr, updated padding on steplist in dual range

* chore: update index for dep prev

* style(slider): fixed label issue in dual range

* wip: track click on daul range

* some work on perrcentages

* mathing

* feat(slider): track clicking in dual range

* chore(slider): cleanup comments

* test(slider): add dual range markup to tests. WIP

* style(slider): dual range disabled styles

* test: udpate index for dep prev

* fix(slider): no clicking disabled dual range

* style(slider): help/error text styling in dual

* style(slider): cursor in disabeld dual

* test(slider): wip; added tests for dual range

* test: wip

* docs(slider): dual range slider story

* fix(slider): cannot click to move track between thumbs

* style(slider): cursor pointer on dual range

* refactor(slider): moved some markup, refactor styles

* tests(slider): add slider variants for vrts

* cleanup

* test(slider): comment out test

* refactor(slider): remove extra else statement, refer to attr instead of props

* fix(slider, utils): modify renderHiddenInput to render second input in dual range

* chore: snapshots

* test(slider): WIP for dual range in form

* test(slider): add form test for dual range

* chore: reset index

* fix(slider): render second input fix

* fix(slider): dual range with step

* chore: cleanup console log

* fix(slider): cleanup, no longer able to click inbetween thumbs if they swap first

* fix(slider): visual bug when upper end clicked and step is not a multiple

* fix(slider): changed names for clearer form submission

* test(slider): test for strict prop

* chore: reset index

* docs:changeset

* fix(slider): fixed multiple hidden inputs issue. added input event emission to click

* docs(slider): fix SB props for dual range

* chore: vrt snaps

* fix(slider): reflect stric prop

* docs(slider): readme

* rm macos snaps

* test(slider): update test file to use value instead of max-val

* chore: update snaps

* rm macos snaps

* chore: reset vrt-snaps to main

* test(slider): add snapshots

---------

Co-authored-by: Kiley Mitti <[email protected]>
Co-authored-by: Mark Anthony Cianfrani <[email protected]>
  • Loading branch information
@micahjones13 @kiley-mitti @markacianfrani
3 people authored Jul 17, 2023
1 parent 94033cc commit c07d5f5
Show file tree
Hide file tree
Showing 15 changed files with 678 additions and 176 deletions.
11 changes: 11 additions & 0 deletions .changeset/shaggy-grapes-arrive.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@astrouxds/astro-web-components": minor
"angular-workspace": minor
"@astrouxds/angular": minor
"astro-angular": minor
"astro-react": minor
"astro-vue": minor
"@astrouxds/react": minor
---

Added dual range functionality to slider
20 changes: 18 additions & 2 deletions packages/web-components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19850,6 +19850,10 @@ export namespace Components {
* Min value of the slider.
*/
"min": number;
/**
* If present, creates a dual-range slider by adding a second thumb.
*/
"minVal"?: number;
/**
* Name of the Input Field for Form Submission
*/
Expand All @@ -19858,12 +19862,16 @@ export namespace Components {
* Step amount of slider value.
*/
"step": number;
/**
* In a dual-range slider, disables thumb swapping.
*/
"strict": boolean;
/**
* Hides labels and only shows tick marks if axis-labels is provided.
*/
"ticksOnly": boolean;
/**
* Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
* Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) In dual-range, this value should be higher than the min-val.
*/
"value": number;
}
Expand Down Expand Up @@ -55397,6 +55405,10 @@ declare namespace LocalJSX {
* Min value of the slider.
*/
"min"?: number;
/**
* If present, creates a dual-range slider by adding a second thumb.
*/
"minVal"?: number;
/**
* Name of the Input Field for Form Submission
*/
Expand All @@ -55417,12 +55429,16 @@ declare namespace LocalJSX {
* Step amount of slider value.
*/
"step"?: number;
/**
* In a dual-range slider, disables thumb swapping.
*/
"strict"?: boolean;
/**
* Hides labels and only shows tick marks if axis-labels is provided.
*/
"ticksOnly"?: boolean;
/**
* Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
* Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) In dual-range, this value should be higher than the min-val.
*/
"value"?: number;
}
Expand Down
35 changes: 15 additions & 20 deletions packages/web-components/src/components/rux-slider/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,19 +57,21 @@ Pass properties via attributes similar to the native [HTML Input Range](https://

## Properties

| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------------------------- |
| `axisLabels` | -- | Shows tick marks and labels in the order provided and aligns evenly based on the length. | `string[]` | `[]` |
| `disabled` | `disabled` | Determines if the slider is disabled. | `boolean` | `false` |
| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` |
| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` |
| `label` | `label` | The slider label text. For HTML content, use the `label` slot instead. | `string \| undefined` | `undefined` |
| `max` | `max` | Max value of slider. | `number` | `100` |
| `min` | `min` | Min value of the slider. | `number` | `0` |
| `name` | `name` | Name of the Input Field for Form Submission | `string` | `''` |
| `step` | `step` | Step amount of slider value. | `number` | `1` |
| `ticksOnly` | `ticks-only` | Hides labels and only shows tick marks if axis-labels is provided. | `boolean` | `false` |
| `value` | `value` | Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) | `number` | `(this.max! - this.min!) / 2 + this.min!` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------------------------- |
| `axisLabels` | -- | Shows tick marks and labels in the order provided and aligns evenly based on the length. | `string[]` | `[]` |
| `disabled` | `disabled` | Determines if the slider is disabled. | `boolean` | `false` |
| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` |
| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` |
| `label` | `label` | The slider label text. For HTML content, use the `label` slot instead. | `string \| undefined` | `undefined` |
| `max` | `max` | Max value of slider. | `number` | `100` |
| `min` | `min` | Min value of the slider. | `number` | `0` |
| `minVal` | `min-val` | If present, creates a dual-range slider by adding a second thumb. | `number \| undefined` | `undefined` |
| `name` | `name` | Name of the Input Field for Form Submission | `string` | `''` |
| `step` | `step` | Step amount of slider value. | `number` | `1` |
| `strict` | `strict` | In a dual-range slider, disables thumb swapping. | `boolean` | `false` |
| `ticksOnly` | `ticks-only` | Hides labels and only shows tick marks if axis-labels is provided. | `boolean` | `false` |
| `value` | `value` | Current value of the slider. The default value is halfway between the specified minimum and maximum. - [HTMLElement/input_type_range>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) In dual-range, this value should be higher than the min-val. | `number` | `(this.max! - this.min!) / 2 + this.min!` |


## Events
Expand Down Expand Up @@ -104,13 +106,6 @@ Pass properties via attributes similar to the native [HTML Input Range](https://
| `"tick-container"` | The container of the tick mark and axis-label |


## CSS Custom Properties

| Name | Description |
| ------------------------------------ | ---------------------------------------- |
| `--slider-track-before-thumb-height` | the height of the track before the thumb |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
133 changes: 81 additions & 52 deletions packages/web-components/src/components/rux-slider/rux-slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
--_slider-thumb-size: calc(var(--spacing-4) + var(--spacing-1)); //20
--_slider-value-percent: 50%;
--_slider-top: calc(var(--_slider-thumb-size) / -2.4);
--_start-value-percent: 20%;

position: relative;
display: flex;
flex-grow: 1;
flex-flow: column;
Expand All @@ -27,8 +29,24 @@
display: none;
}

:host([disabled]) > .rux-form-field > .rux-slider {
opacity: var(--opacity-disabled);
cursor: not-allowed;
.rux-range-overlay {
cursor: not-allowed;
}
}
:host([disabled]) > .rux-form-field > #steplist {
opacity: var(--opacity-disabled);
cursor: not-allowed;
.tick-label {
.axis-label {
cursor: not-allowed;
}
}
}

.rux-form-field {
flex-direction: column;
label {
margin-bottom: var(--spacing-2);
}
Expand All @@ -47,6 +65,9 @@
}

.rux-slider {
display: flex;
align-items: center;
cursor: pointer;
height: calc(var(--spacing-4) + var(--spacing-1)); //20
position: relative;
font-family: var(--font-body-1-font-family);
Expand All @@ -59,55 +80,51 @@
:disabled {
cursor: not-allowed;
}
.rux-range:disabled + #steplist {
opacity: var(--opacity-disabled);
cursor: not-allowed;
.tick {
cursor: not-allowed;
}
.tick-label {
.axis-label {
cursor: not-allowed;
}
}
}

#steplist {
display: grid;
padding: var(--spacing-0) calc(var(--_slider-thumb-size) / 2); //center first and last dot on thumb at start and end
cursor: default;

.tick-label {
grid-row: 1;
width: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-body-3-font-family);
font-size: var(--font-body-3-font-size);
line-height: var(--font-body-3-line-height);
letter-spacing: var(--font-body-3-letter-spacing);
font-weight: var(--font-body-3-font-weight);

.axis-label {
padding-top: var(--spacing-1); //4px
cursor: default;
}
}
.tick {
background: var(--color-background-interactive-default);
height: var(--spacing-1); //4px
width: var(--spacing-1);
border-radius: var(--radius-circle);
&--range input[type='range'] {
position: absolute;
width: 100%;
height: var(--spacing-025);
background-color: var(--color-background-interactive-default);
pointer-events: none;
}
}
#steplist {
display: grid;
padding: var(--spacing-0) calc(var(--_slider-thumb-size) / 2); //center first and last dot on thumb at start and end
cursor: default;

.tick-label {
grid-row: 1;
width: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-body-3-font-family);
font-size: var(--font-body-3-font-size);
line-height: var(--font-body-3-line-height);
letter-spacing: var(--font-body-3-letter-spacing);
font-weight: var(--font-body-3-font-weight);

.axis-label {
padding-top: var(--spacing-1); //4px
cursor: default;
}
.tick-label:not(:first-child):not(:last-child) {
padding: 0;
}
:disabled {
opacity: var(--opacity-disabled);
}
}
.tick {
background: var(--color-background-interactive-default);
height: var(--spacing-1); //4px
width: var(--spacing-1);
border-radius: var(--radius-circle);
cursor: default;
}
.tick-label:not(:first-child):not(:last-child) {
padding: 0;
}
}

.rux-slider + #steplist {
padding: var(--spacing-1) calc(var(--_slider-thumb-size) / 2);
}

.rux-range {
Expand All @@ -121,8 +138,8 @@
margin: var(--spacing-0);
color: transparent;
position: relative;
z-index: 1;
}

input[type='range']:focus {
outline: none;
}
Expand Down Expand Up @@ -165,8 +182,23 @@ input[type='range']:focus {
calc(100% - (var(--_slider-thumb-size) / 2)),
calc((var(--_slider-thumb-size) / 2) - var(--spacing-050));
}
.rux-range--dual::-webkit-slider-runnable-track {
background-image: none;
z-index: 1;
min-block-size: auto;
}
.rux-range-overlay {
position: absolute;
height: var(--spacing-1);
background-color: var(--color-background-interactive-default);
left: var(--_start-value-percent);
width: calc(var(--_slider-value-percent) - var(--_start-value-percent));

&:hover {
cursor: default;
}
}
.rux-range:disabled::-webkit-slider-runnable-track {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

Expand Down Expand Up @@ -208,12 +240,10 @@ input[type='range']:focus {
}
.rux-range:disabled::-moz-range-track,
.rux-range:disabled::-moz-range-progress {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

.rux-input:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

Expand Down Expand Up @@ -266,6 +296,7 @@ input[type='range']:focus {
background-color: var(--color-background-base-default);
cursor: pointer;
z-index: 6;
pointer-events: all;
}

.rux-range::-webkit-slider-thumb:hover {
Expand Down Expand Up @@ -326,7 +357,6 @@ input[type='range']:focus {
}

.rux-range:disabled::-moz-range-thumb {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}

Expand All @@ -343,7 +373,6 @@ input[type='range']:focus {
z-index: 6;
}
.rux-range:disabled::-ms-thumb {
opacity: 0.4;
cursor: not-allowed;
}
.rux-range:focus-visible::-ms-thumb {
Expand Down
Loading

0 comments on commit c07d5f5

Please sign in to comment.