mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Rename Range to Slider (#428)
This commit is contained in:
Lea Verou
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 337 B |
@@ -248,7 +248,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -267,7 +267,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-distance wa-range {
|
||||
.popup-distance wa-slider {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -275,7 +275,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<script>
|
||||
const container = document.querySelector('.popup-distance');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const distance = container.querySelector('wa-range');
|
||||
const distance = container.querySelector('wa-slider');
|
||||
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
</script>
|
||||
@@ -292,7 +292,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -311,7 +311,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-skidding wa-range {
|
||||
.popup-skidding wa-slider {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -319,7 +319,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<script>
|
||||
const container = document.querySelector('.popup-skidding');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const skidding = container.querySelector('wa-range');
|
||||
const skidding = container.querySelector('wa-slider');
|
||||
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
</script>
|
||||
@@ -747,8 +747,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
</wa-popup>
|
||||
<br>
|
||||
<wa-switch checked>Hover Bridge</wa-switch><br>
|
||||
<wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
<wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
</div>
|
||||
<style>
|
||||
.popup-hover-bridge span[slot='anchor'] {
|
||||
@@ -766,7 +766,7 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-hover-bridge wa-range {
|
||||
.popup-hover-bridge wa-slider {
|
||||
max-width: 260px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
@@ -780,8 +780,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
const container = document.querySelector('.popup-hover-bridge');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const hoverBridge = container.querySelector('wa-switch');
|
||||
const distance = container.querySelector('wa-range[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-range[label="Skidding"]');
|
||||
const distance = container.querySelector('wa-slider[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-slider[label="Skidding"]');
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Range
|
||||
title: Slider
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
tags: [inputs, forms]
|
||||
native: slider
|
||||
icon: range
|
||||
icon: slider
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-range></wa-range>
|
||||
<wa-slider></wa-slider>
|
||||
```
|
||||
|
||||
:::info
|
||||
@@ -21,7 +21,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
|
||||
Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-range label="Volume" min="0" max="100"></wa-range>
|
||||
<wa-slider label="Volume" min="0" max="100"></wa-slider>
|
||||
```
|
||||
|
||||
### Hint
|
||||
@@ -29,7 +29,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
|
||||
Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
|
||||
<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
|
||||
```
|
||||
|
||||
### Min, Max, and Step
|
||||
@@ -37,7 +37,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
|
||||
Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
|
||||
|
||||
```html {.example}
|
||||
<wa-range min="0" max="10" step="1"></wa-range>
|
||||
<wa-slider min="0" max="10" step="1"></wa-slider>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -45,7 +45,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
|
||||
Use the `disabled` attribute to disable a slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-range disabled></wa-range>
|
||||
<wa-slider disabled></wa-slider>
|
||||
```
|
||||
|
||||
### Tooltip Placement
|
||||
@@ -53,7 +53,7 @@ Use the `disabled` attribute to disable a slider.
|
||||
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-range tooltip="bottom"></wa-range>
|
||||
<wa-slider tooltip="bottom"></wa-slider>
|
||||
```
|
||||
|
||||
### Disable the Tooltip
|
||||
@@ -61,7 +61,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
|
||||
To disable the tooltip, set `tooltip` to `none`.
|
||||
|
||||
```html {.example}
|
||||
<wa-range tooltip="none"></wa-range>
|
||||
<wa-slider tooltip="none"></wa-slider>
|
||||
```
|
||||
|
||||
### Custom Track Colors
|
||||
@@ -69,12 +69,12 @@ To disable the tooltip, set `tooltip` to `none`.
|
||||
You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
|
||||
|
||||
```html {.example}
|
||||
<wa-range
|
||||
<wa-slider
|
||||
style="
|
||||
--track-color-active: var(--wa-color-brand-fill-loud);
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
"
|
||||
></wa-range>
|
||||
></wa-slider>
|
||||
```
|
||||
|
||||
### Custom Track Offset
|
||||
@@ -82,7 +82,7 @@ You can customize the active and inactive portions of the track using the `--tra
|
||||
You can customize the initial offset of the active track using the `--track-active-offset` custom property.
|
||||
|
||||
```html {.example}
|
||||
<wa-range
|
||||
<wa-slider
|
||||
min="-100"
|
||||
max="100"
|
||||
style="
|
||||
@@ -90,7 +90,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
--track-active-offset: 50%;
|
||||
"
|
||||
></wa-range>
|
||||
></wa-slider>
|
||||
```
|
||||
|
||||
### Custom Tooltip Formatter
|
||||
@@ -98,7 +98,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
|
||||
|
||||
```html {.example}
|
||||
<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
|
||||
<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>
|
||||
|
||||
<script>
|
||||
const range = document.querySelector('.range-with-custom-formatter');
|
||||
@@ -111,8 +111,8 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
|
||||
The component adapts to right-to-left (RTL) languages as you would expect.
|
||||
|
||||
```html {.example}
|
||||
<wa-range dir="rtl"
|
||||
<wa-slider dir="rtl"
|
||||
label="مقدار"
|
||||
hint="التحكم في مستوى صوت الأغنية الحالية."
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
|
||||
```
|
||||
@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
|
||||
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
|
||||
|
||||
@@ -132,7 +132,7 @@ layout: page
|
||||
<br />
|
||||
<wa-switch checked>Switch on</wa-switch>
|
||||
<br /><br />
|
||||
<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
|
||||
<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
|
||||
<br /><br />
|
||||
<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
|
||||
<br />
|
||||
@@ -239,7 +239,7 @@ layout: page
|
||||
<wa-badge>OCBS</wa-badge>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-range></wa-range>
|
||||
<wa-slider></wa-slider>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
|
||||
@@ -661,10 +661,10 @@ hasOutline: false
|
||||
<wa-option value="dotted">Dotted</wa-option>
|
||||
<wa-option value="double">Double</wa-option>
|
||||
</wa-select>
|
||||
<wa-range name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
|
||||
<wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
|
||||
<wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
|
||||
<wa-range name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-range>
|
||||
<wa-slider name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-slider>
|
||||
<wa-slider name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-slider>
|
||||
<wa-slider name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-slider>
|
||||
<wa-slider name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-slider>
|
||||
</wa-details>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ title: Slider
|
||||
description: Sliders allow the user to select a single value within a given range using a slider.
|
||||
tags: forms
|
||||
layout: element
|
||||
icon: range
|
||||
component: range
|
||||
icon: slider
|
||||
component: slider
|
||||
elements:
|
||||
"<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
|
||||
---
|
||||
|
||||
@@ -50,7 +50,7 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
|
||||
</wa-radio-group>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
<wa-switch>Switch</wa-switch>
|
||||
<wa-range label="Range"></wa-range>
|
||||
<wa-slider label="Range"></wa-slider>
|
||||
<wa-button>Button</wa-button>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -6,20 +6,20 @@ import { clickOnElement } from '../../internal/test.js';
|
||||
import { fixtures } from '../../internal/test/fixture.js';
|
||||
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
|
||||
import { serialize } from '../../utilities/form.js';
|
||||
import type WaRange from './range.js';
|
||||
import type WaSlider from './slider.js';
|
||||
|
||||
describe('<wa-range>', () => {
|
||||
runFormControlBaseTests('wa-range');
|
||||
describe('<wa-slider>', () => {
|
||||
runFormControlBaseTests('wa-slider');
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
describe(`with "${fixture.type}" rendering`, () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
const el = await fixture<WaRange>(html`<wa-range label="Name"></wa-range>`);
|
||||
const el = await fixture<WaSlider>(html`<wa-slider label="Name"></wa-slider>`);
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
it('default properties', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider></wa-slider> `);
|
||||
|
||||
expect(el.name).to.equal('');
|
||||
expect(el.value).to.equal(0);
|
||||
@@ -36,14 +36,14 @@ describe('<wa-range>', () => {
|
||||
});
|
||||
|
||||
it('should have title if title attribute is set', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range title="Test"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider title="Test"></wa-slider> `);
|
||||
const input = el.shadowRoot!.querySelector('input')!;
|
||||
|
||||
expect(input.title).to.equal('Test');
|
||||
});
|
||||
|
||||
it('should be disabled with the disabled attribute', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range disabled></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider disabled></wa-slider> `);
|
||||
const input = el.shadowRoot!.querySelector<HTMLInputElement>('.control')!;
|
||||
|
||||
expect(input.disabled).to.be.true;
|
||||
@@ -51,7 +51,7 @@ describe('<wa-range>', () => {
|
||||
|
||||
describe('when the value changes', () => {
|
||||
it('should emit wa-change and wa-input and decrease the value when pressing right arrow', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range value="50"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider value="50"></wa-slider> `);
|
||||
const changeHandler = sinon.spy();
|
||||
const inputHandler = sinon.spy();
|
||||
|
||||
@@ -67,7 +67,7 @@ describe('<wa-range>', () => {
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when changing the value programmatically', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range value="0"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider value="0"></wa-slider> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
@@ -77,7 +77,7 @@ describe('<wa-range>', () => {
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when stepUp() is called programmatically', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
@@ -86,7 +86,7 @@ describe('<wa-range>', () => {
|
||||
});
|
||||
|
||||
it('should not emit wa-change or wa-input when stepDown() is called programmatically', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
|
||||
|
||||
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
|
||||
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
|
||||
@@ -97,7 +97,7 @@ describe('<wa-range>', () => {
|
||||
|
||||
describe('step', () => {
|
||||
it('should increment by step when stepUp() is called', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
|
||||
|
||||
el.stepUp();
|
||||
await el.updateComplete;
|
||||
@@ -105,7 +105,7 @@ describe('<wa-range>', () => {
|
||||
});
|
||||
|
||||
it('should decrement by step when stepDown() is called', async () => {
|
||||
const el = await fixture<WaRange>(html` <wa-range step="2" value="2"></wa-range> `);
|
||||
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
|
||||
|
||||
el.stepDown();
|
||||
await el.updateComplete;
|
||||
@@ -115,49 +115,49 @@ describe('<wa-range>', () => {
|
||||
|
||||
describe('when submitting a form', () => {
|
||||
it('should serialize its name and value with FormData', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html` <form><wa-range name="a" value="1"></wa-range></form> `);
|
||||
const form = await fixture<HTMLFormElement>(html` <form><wa-slider name="a" value="1"></wa-slider></form> `);
|
||||
const formData = new FormData(form);
|
||||
expect(formData.get('a')).to.equal('1');
|
||||
});
|
||||
|
||||
it('should serialize its name and value with JSON', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html` <form><wa-range name="a" value="1"></wa-range></form> `);
|
||||
const form = await fixture<HTMLFormElement>(html` <form><wa-slider name="a" value="1"></wa-slider></form> `);
|
||||
const json = serialize(form);
|
||||
expect(json.a).to.equal('1');
|
||||
});
|
||||
|
||||
it('should be invalid when setCustomValidity() is called with a non-empty value', async () => {
|
||||
const range = await fixture<HTMLFormElement>(html` <wa-range></wa-range> `);
|
||||
const slider = await fixture<HTMLFormElement>(html` <wa-slider></wa-slider> `);
|
||||
|
||||
range.setCustomValidity('Invalid selection');
|
||||
await range.updateComplete;
|
||||
slider.setCustomValidity('Invalid selection');
|
||||
await slider.updateComplete;
|
||||
|
||||
expect(range.checkValidity()).to.be.false;
|
||||
expect(range.hasCustomState('invalid')).to.be.true;
|
||||
expect(range.hasCustomState('valid')).to.be.false;
|
||||
expect(range.hasCustomState('user-invalid')).to.be.false;
|
||||
expect(range.hasCustomState('user-valid')).to.be.false;
|
||||
expect(slider.checkValidity()).to.be.false;
|
||||
expect(slider.hasCustomState('invalid')).to.be.true;
|
||||
expect(slider.hasCustomState('valid')).to.be.false;
|
||||
expect(slider.hasCustomState('user-invalid')).to.be.false;
|
||||
expect(slider.hasCustomState('user-valid')).to.be.false;
|
||||
|
||||
await clickOnElement(range);
|
||||
await range.updateComplete;
|
||||
range.blur();
|
||||
await range.updateComplete;
|
||||
await clickOnElement(slider);
|
||||
await slider.updateComplete;
|
||||
slider.blur();
|
||||
await slider.updateComplete;
|
||||
|
||||
expect(range.hasCustomState('user-invalid')).to.be.true;
|
||||
expect(range.hasCustomState('user-valid')).to.be.false;
|
||||
expect(slider.hasCustomState('user-invalid')).to.be.true;
|
||||
expect(slider.hasCustomState('user-valid')).to.be.false;
|
||||
});
|
||||
|
||||
it('should receive validation attributes ("states") even when novalidate is used on the parent form', async () => {
|
||||
const el = await fixture<HTMLFormElement>(html` <form novalidate><wa-range></wa-range></form> `);
|
||||
const range = el.querySelector<WaRange>('wa-range')!;
|
||||
const el = await fixture<HTMLFormElement>(html` <form novalidate><wa-slider></wa-slider></form> `);
|
||||
const slider = el.querySelector<WaSlider>('wa-slider')!;
|
||||
|
||||
range.setCustomValidity('Invalid value');
|
||||
await range.updateComplete;
|
||||
slider.setCustomValidity('Invalid value');
|
||||
await slider.updateComplete;
|
||||
|
||||
expect(range.hasCustomState('invalid')).to.be.true;
|
||||
expect(range.hasCustomState('valid')).to.be.false;
|
||||
expect(range.hasCustomState('user-invalid')).to.be.false;
|
||||
expect(range.hasCustomState('user-valid')).to.be.false;
|
||||
expect(slider.hasCustomState('invalid')).to.be.true;
|
||||
expect(slider.hasCustomState('valid')).to.be.false;
|
||||
expect(slider.hasCustomState('user-invalid')).to.be.false;
|
||||
expect(slider.hasCustomState('user-valid')).to.be.false;
|
||||
});
|
||||
|
||||
it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
|
||||
@@ -166,7 +166,7 @@ describe('<wa-range>', () => {
|
||||
<form id="f">
|
||||
<wa-button type="submit">Submit</wa-button>
|
||||
</form>
|
||||
<wa-range form="f" name="a" value="50"></wa-range>
|
||||
<wa-slider form="f" name="a" value="50"></wa-slider>
|
||||
</div>
|
||||
`);
|
||||
const form = el.querySelector('form')!;
|
||||
@@ -180,12 +180,12 @@ describe('<wa-range>', () => {
|
||||
it('should reset the element to its initial value', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html`
|
||||
<form>
|
||||
<wa-range name="a" value="99"></wa-range>
|
||||
<wa-slider name="a" value="99"></wa-slider>
|
||||
<wa-button type="reset">Reset</wa-button>
|
||||
</form>
|
||||
`);
|
||||
const button = form.querySelector('wa-button')!;
|
||||
const input = form.querySelector('wa-range')!;
|
||||
const input = form.querySelector('wa-slider')!;
|
||||
input.value = 80;
|
||||
|
||||
await input.updateComplete;
|
||||
@@ -14,7 +14,7 @@ import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-eleme
|
||||
import sliderStyles from '../../styles/native/slider.css';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import styles from './range.css';
|
||||
import styles from './slider.css';
|
||||
|
||||
/**
|
||||
* @summary Ranges allow the user to select a single value within a given range using a slider.
|
||||
@@ -22,7 +22,7 @@ import styles from './range.css';
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot label - The range's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot label - The slider label. Alternatively, you can use the `label` attribute.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event wa-blur - Emitted when the control loses focus.
|
||||
@@ -36,7 +36,7 @@ import styles from './range.css';
|
||||
* @csspart form-control-input - The input's wrapper.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart base - The internal `<input>` element.
|
||||
* @csspart tooltip - The range's tooltip.
|
||||
* @csspart tooltip - The slider tooltip.
|
||||
*
|
||||
* @cssproperty --thumb-color - The color of the thumb.
|
||||
* @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
|
||||
@@ -48,8 +48,8 @@ import styles from './range.css';
|
||||
* @cssproperty --track-height - The height of the track.
|
||||
* @cssproperty --track-active-offset - The point of origin of the active track.
|
||||
*/
|
||||
@customElement('wa-range')
|
||||
export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
@customElement('wa-slider')
|
||||
export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
static shadowStyle = [formControlStyles, sliderStyles, styles];
|
||||
|
||||
static get validators() {
|
||||
@@ -66,7 +66,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
@state() private hasTooltip = false;
|
||||
@property() title = ''; // make reactive to pass through
|
||||
|
||||
/** The name of the range, submitted as a name/value pair with form data. */
|
||||
/** The name of the slider, submitted as a name/value pair with form data. */
|
||||
@property() name: string = '';
|
||||
|
||||
/** The default value of the form control. Primarily used for resetting the form control. */
|
||||
@@ -75,7 +75,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
private _value: number | null = null;
|
||||
|
||||
/** The current value of the range, submitted as a name/value pair with form data. */
|
||||
/** The current value of the slider, submitted as a name/value pair with form data. */
|
||||
get value(): number {
|
||||
if (this.valueHasChanged) {
|
||||
return this._value || 0;
|
||||
@@ -94,29 +94,29 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
this._value = val;
|
||||
}
|
||||
|
||||
/** The range's label. If you need to display HTML, use the `label` slot instead. */
|
||||
/** The slider label. If you need to display HTML, use the `label` slot instead. */
|
||||
@property() label = '';
|
||||
|
||||
/** The range's hint. If you need to display HTML, use the hint slot instead. */
|
||||
/** The slider hint. If you need to display HTML, use the hint slot instead. */
|
||||
@property({ attribute: 'hint' }) hint = '';
|
||||
|
||||
/** Disables the range. */
|
||||
/** Disables the slider. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
|
||||
/** The minimum acceptable value of the range. */
|
||||
/** The minimum acceptable value of the slider. */
|
||||
@property({ type: Number }) min = 0;
|
||||
|
||||
/** The maximum acceptable value of the range. */
|
||||
/** The maximum acceptable value of the slider. */
|
||||
@property({ type: Number }) max = 100;
|
||||
|
||||
/** The interval at which the range will increase and decrease. */
|
||||
/** The interval at which the slider will increase and decrease. */
|
||||
@property({ type: Number }) step = 1;
|
||||
|
||||
/** The preferred placement of the range's tooltip. */
|
||||
/** The preferred placement of the slider tooltip. */
|
||||
@property() tooltip: 'top' | 'bottom' | 'none' = 'top';
|
||||
|
||||
/**
|
||||
* A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
|
||||
* A function used to format the tooltip's value. The slider value is passed as the first and only argument. The
|
||||
* function should return a string to display in the tooltip.
|
||||
*/
|
||||
@property({ attribute: false }) tooltipFormatter: (value: number) => string = (value: number) => value.toString();
|
||||
@@ -237,17 +237,17 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
}
|
||||
|
||||
/** Sets focus on the range. */
|
||||
/** Sets focus on the slider. */
|
||||
focus(options?: FocusOptions) {
|
||||
this.input.focus(options);
|
||||
}
|
||||
|
||||
/** Removes focus from the range. */
|
||||
/** Removes focus from the slider. */
|
||||
blur() {
|
||||
this.input.blur();
|
||||
}
|
||||
|
||||
/** Increments the value of the range by the value of the step attribute. */
|
||||
/** Increments the value of the slider by the value of the step attribute. */
|
||||
stepUp() {
|
||||
this.input.stepUp();
|
||||
if (this.value !== Number(this.input.value)) {
|
||||
@@ -255,7 +255,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
}
|
||||
|
||||
/** Decrements the value of the range by the value of the step attribute. */
|
||||
/** Decrements the value of the slider by the value of the step attribute. */
|
||||
stepDown() {
|
||||
this.input.stepDown();
|
||||
if (this.value !== Number(this.input.value)) {
|
||||
@@ -330,6 +330,6 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'wa-range': WaRange;
|
||||
'wa-slider': WaSlider;
|
||||
}
|
||||
}
|
||||
@@ -448,7 +448,7 @@ wa-radio {
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-range {
|
||||
wa-slider {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user