From 7ab37e4bff51498e83c7d4f7c8f2c19d9719e37b Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Thu, 18 May 2023 15:11:29 -0700 Subject: [PATCH] feat(slider): adds explicit multi-value support via range=true, valueStart, valueEnd PiperOrigin-RevId: 533264226 --- slider/demo/demo.ts | 10 +-- slider/demo/stories.ts | 39 ++++++------ slider/lib/slider.ts | 139 ++++++++++++++++++++--------------------- slider/slider_test.ts | 126 +++++++++++++++++++------------------ 4 files changed, 158 insertions(+), 156 deletions(-) diff --git a/slider/demo/demo.ts b/slider/demo/demo.ts index 36bd26eae8..9e49f0e464 100644 --- a/slider/demo/demo.ts +++ b/slider/demo/demo.ts @@ -8,16 +8,18 @@ import './index.js'; import './material-collection.js'; import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js'; -import {boolInput, Knob, numberInput, textInput} from './index.js'; +import {boolInput, Knob, numberInput} from './index.js'; import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>('Slider', [ - new Knob('value', {ui: numberInput(), defaultValue: 5}), - new Knob('multivalue.value', {ui: textInput(), defaultValue: '5, 10'}), + new Knob('value', {ui: numberInput(), defaultValue: 50}), + new Knob('range', {ui: boolInput(), defaultValue: false}), + new Knob('valueStart', {ui: numberInput(), defaultValue: 30}), + new Knob('valueEnd', {ui: numberInput(), defaultValue: 70}), new Knob('min', {ui: numberInput(), defaultValue: 0}), - new Knob('max', {ui: numberInput(), defaultValue: 25}), + new Knob('max', {ui: numberInput(), defaultValue: 100}), new Knob('step', {ui: numberInput(), defaultValue: 1}), new Knob('withTickMarks', {ui: boolInput(), defaultValue: false}), new Knob('withLabel', {ui: boolInput(), defaultValue: false}), diff --git a/slider/demo/stories.ts b/slider/demo/stories.ts index 5a4c5f0c46..d0ebf0463c 100644 --- a/slider/demo/stories.ts +++ b/slider/demo/stories.ts @@ -13,10 +13,12 @@ import {css, html} from 'lit'; /** Knob types for slider stories. */ export interface StoryKnobs { value: number; - 'multivalue.value': string; + valueStart: number; + valueEnd: number; min: number; max: number; step: number; + range: boolean; withTickMarks: boolean; withLabel: boolean; disabled: boolean; @@ -36,10 +38,13 @@ const standard: MaterialStoryInit = { return html`