diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js index f6f973f83..a2def2093 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js @@ -54,7 +54,7 @@ export default class ListItemSlider extends ListItem { } static get properties() { - return [...super.properties, 'slider', 'value']; + return [...super.properties, 'slider', 'value', 'max', 'min']; } static get aliasStyles() { @@ -72,6 +72,8 @@ export default class ListItemSlider extends ListItem { _construct() { super._construct(); this.value = 50; + this.max = 100; + this.min = 0; } _update() { @@ -121,7 +123,9 @@ export default class ListItemSlider extends ListItem { visible: !this._collapse, alpha: this.style.alpha, ...this.slider, - value: this.value + value: this.value, + max: this.max, + min: this.min }; this._Slider.patch(sliderProps); diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js index 9cdc1da4a..08cec3407 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js @@ -46,7 +46,9 @@ ListItemSlider.args = { title: 'List Item', value: 50, shouldCollapse: false, - mode: 'focused' + mode: 'focused', + max: 100, + min: 0 }; ListItemSlider.argTypes = { ...createModeControl({ summaryValue: 'focused' }), @@ -74,6 +76,22 @@ ListItemSlider.argTypes = { defaultValue: { summary: false }, type: { summary: 'boolean' } } + }, + max: { + control: 'number', + description: 'Upper bound of value', + table: { + defaultValue: { summary: 100 }, + type: { summary: 'number' } + } + }, + min: { + control: 'number', + description: 'Lower bound of value', + table: { + defaultValue: { summary: 0 }, + type: { summary: 'number' } + } } }; @@ -88,5 +106,5 @@ generateSubStory({ baseStory: ListItemSlider, subStory: SliderStory, targetProperty: 'slider', - include: ['min', 'max', 'step'] + include: ['step'] }); diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js index 4b93104a2..6fba0454a 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js @@ -83,7 +83,7 @@ describe('ListItemSlider', () => { it('should not exceed slider max value when handleRight is clicked', () => { listItemSlider.value = 10; - listItemSlider._Slider.max = 10; + listItemSlider.max = 10; testRenderer.forceAllUpdates(); listItemSlider._handleRight(); expect(listItemSlider._Slider.value).toEqual(10);