Skip to content

Commit

Permalink
feat(slider): update "value" default to match browser native range input
Browse files Browse the repository at this point in the history 
When not supplied value will now be set to halfway between min and max.
  • Loading branch information
@Westbrook
Westbrook committed Oct 26, 2022
1 parent fd87c13 commit 0050f63
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 20 deletions.
19 changes: 15 additions & 4 deletions packages/slider/src/SliderHandle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,12 @@ export class SliderHandle extends Focusable {

_forcedUnit = '';

/**
* By default, the value of a Slider Handle will be halfway between its
* `min` and `max` values, or the `min` value when `max` is less than `min`.
*/
@property({ type: Number })
value = 10;
value!: number;

@property({ type: Boolean, reflect: true })
public dragging = false;
Expand Down Expand Up @@ -126,6 +130,15 @@ export class SliderHandle extends Focusable {
private languageResolver = new LanguageResolutionController(this);

protected override update(changes: PropertyValues): void {
if (!this.hasUpdated) {
const { max, min } = this as { max: number; min: number };
if (this.value == null) {
if (!isNaN(max) && !isNaN(min)) {
this.value = max < min ? min : min + (max - min) / 2;
}
}
}

if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {
delete this._numberFormatCache;
}
Expand All @@ -141,9 +154,7 @@ export class SliderHandle extends Focusable {
super.update(changes);
}

protected override firstUpdated(
changedProperties: PropertyValues<this>
): void {
protected override firstUpdated(changedProperties: PropertyValues<this>): void {
super.firstUpdated(changedProperties);
this.dispatchEvent(new CustomEvent('sp-slider-handle-ready'));
}
Expand Down
32 changes: 16 additions & 16 deletions packages/slider/test/slider.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ describe('Slider', () => {

await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(46);
expect(el.highlight).to.be.false;

el.focus();
Expand All @@ -118,14 +118,14 @@ describe('Slider', () => {
});
await elementUpdated(el);

expect(el.value).to.equal(9);
expect(el.value).to.equal(45);
expect(el.highlight).to.be.true;
await sendKeys({
press: 'ArrowUp',
});
await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(46);
expect(el.highlight).to.be.true;
});
it('accepts pointer events', async () => {
Expand Down Expand Up @@ -224,7 +224,7 @@ describe('Slider', () => {

await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(35);

const controls = el.shadowRoot.querySelector(
'#controls'
Expand All @@ -246,7 +246,7 @@ describe('Slider', () => {
await elementUpdated(el);

expect(pointerId).to.equal(-1);
expect(el.value).to.equal(10);
expect(el.value).to.equal(35);
expect(el.dragging, 'handle is not yet being dragged').to.be.false;

controls.dispatchEvent(
Expand Down Expand Up @@ -308,7 +308,7 @@ describe('Slider', () => {

expect(el.dragging).to.be.false;
expect(pointerId).to.equal(-1);
expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
handle.setPointerCapture = (id: number) => (pointerId = id);
Expand Down Expand Up @@ -340,7 +340,7 @@ describe('Slider', () => {
await elementUpdated(el);

expect(pointerId).to.equal(-1);
expect(el.value).to.equal(10);
expect(el.value).to.equal(50);
});
it('accepts pointermove events', async () => {
const el = await fixture<Slider>(
Expand All @@ -350,7 +350,7 @@ describe('Slider', () => {
);
await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
await sendMouse({
Expand Down Expand Up @@ -390,7 +390,7 @@ describe('Slider', () => {
);
await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(6);

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
await sendMouse({
Expand Down Expand Up @@ -430,7 +430,7 @@ describe('Slider', () => {
);
await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
const handleBoundingRect = handle.getBoundingClientRect();
Expand All @@ -452,7 +452,7 @@ describe('Slider', () => {

expect(el.dragging, 'is dragging').to.be.true;
expect(el.highlight, 'not highlighted').to.be.false;
expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

const inputEvent = oneEvent(el, 'input');
await sendMouse({
Expand Down Expand Up @@ -501,7 +501,7 @@ describe('Slider', () => {
);
await elementUpdated(el);

expect(el.value, 'initial').to.equal(10);
expect(el.value, 'initial').to.equal(50);

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
el.track.setPointerCapture = (id: number) => (pointerId = id);
Expand Down Expand Up @@ -682,7 +682,7 @@ describe('Slider', () => {

await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);
expect(el.dragging).to.be.false;

const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
Expand All @@ -695,7 +695,7 @@ describe('Slider', () => {
);
await nextFrame();

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);
});
it('responds to input events on the <input/> element', async () => {
const el = await fixture<Slider>(
Expand All @@ -706,7 +706,7 @@ describe('Slider', () => {

await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

const input = el.shadowRoot.querySelector('.input') as HTMLInputElement;

Expand Down Expand Up @@ -925,7 +925,7 @@ describe('Slider', () => {

await elementUpdated(el);

expect(el.value).to.equal(10);
expect(el.value).to.equal(50);

el.min = 0;
el.max = 200;
Expand Down

0 comments on commit 0050f63

Please sign in to comment.