diff --git a/packages/slider/src/SliderHandle.ts b/packages/slider/src/SliderHandle.ts index 60d7e8b8e5..f2dbeeb035 100644 --- a/packages/slider/src/SliderHandle.ts +++ b/packages/slider/src/SliderHandle.ts @@ -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; @@ -134,6 +138,16 @@ export class SliderHandle extends Focusable { super.update(changes); } + protected firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + 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; + } + } + } + protected updated(changedProperties: PropertyValues): void { if (changedProperties.has('value')) { const oldValue = changedProperties.get('value'); diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts index 7be505a16d..a43564cdf2 100644 --- a/packages/slider/test/slider.test.ts +++ b/packages/slider/test/slider.test.ts @@ -99,7 +99,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(); @@ -108,14 +108,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 () => { @@ -214,7 +214,7 @@ describe('Slider', () => { await elementUpdated(el); - expect(el.value).to.equal(10); + expect(el.value).to.equal(35); const controls = el.shadowRoot.querySelector( '#controls' @@ -236,7 +236,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( @@ -298,7 +298,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); @@ -330,7 +330,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( @@ -340,7 +340,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({ @@ -380,7 +380,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); @@ -561,7 +561,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; @@ -574,7 +574,7 @@ describe('Slider', () => { ); await nextFrame(); - expect(el.value).to.equal(10); + expect(el.value).to.equal(50); }); it('responds to input events on the element', async () => { const el = await fixture( @@ -585,7 +585,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; @@ -815,7 +815,7 @@ describe('Slider', () => { await elementUpdated(el); - expect(el.value).to.equal(10); + expect(el.value).to.equal(50); el.min = 0; el.max = 200;