fix(slider): update "value" default to match browser native range input

BREAKING CHANGE: When not supplied value will now be set to halfway between min and max.

Author: Westbrook

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,17 @@ export class SliderHandle extends Focusable {
         super.update(changes);
     }
 
+    protected firstUpdated(changedProperties: PropertyValues<this>): void {
+        super.firstUpdated(changedProperties);
+        this.dispatchEvent(new CustomEvent('sp-slider-handle-ready'));
+        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<this>): void {
         if (changedProperties.has('value')) {
             const oldValue = changedProperties.get('value');
@@ -146,11 +161,6 @@ export class SliderHandle extends Focusable {
         super.updated(changedProperties);
     }
 
-    protected firstUpdated(changedProperties: PropertyValues<this>): void {
-        super.firstUpdated(changedProperties);
-        this.dispatchEvent(new CustomEvent('sp-slider-handle-ready'));
-    }
-
     @property({ attribute: false })
     public normalization: SliderNormalization = defaultNormalization;
 

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<Slider>(
@@ -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 <input/> element', async () => {
         const el = await fixture<Slider>(
@@ -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;