wip

src/DoubleSlider.ts

@@ -261,4 +261,30 @@ export class DoubleSlider extends SliderBase
             this.value2Text.y = sliderPosY + (this.sliderOptions.valueTextOffset?.y ?? 0);
         }
     }
+
+    override set width(value: number)
+    {
+        super.width = value;
+
+        this.updateSlider1();
+        this.updateSlider2();
+    }
+
+    override get width(): number
+    {
+        return super.width;
+    }
+
+    override set height(value: number)
+    {
+        super.height = value;
+
+        this.updateSlider1();
+        this.updateSlider2();
+    }
+
+    override get height(): number
+    {
+        return super.height;
+    }
 }

src/Slider.ts

@@ -39,16 +39,9 @@ export class Slider extends SliderBase
     constructor(options: SliderOptions)
     {
         super({
-            bg: options.bg,
             slider1: options.slider,
-            fill: options.fill ?? '',
-            min: options.min,
-            max: options.max,
             value1: options.value,
-            valueTextStyle: options.valueTextStyle,
-            showValue: options.showValue,
-            valueTextOffset: options.valueTextOffset,
-            fillPaddings: options.fillPaddings,
+            ...options
         });
 
         this.sliderOptions = options;
@@ -120,4 +113,28 @@ export class Slider extends SliderBase
             this.value1Text.y = sliderPosY + (this.sliderOptions.valueTextOffset?.y ?? 0);
         }
     }
+
+    override set width(value: number)
+    {
+        super.width = value;
+
+        this.updateSlider();
+    }
+
+    override get width(): number
+    {
+        return super.width;
+    }
+
+    override set height(value: number)
+    {
+        super.height = value;
+
+        this.updateSlider();
+    }
+
+    override get height(): number
+    {
+        return super.height;
+    }
 }

src/SliderBase.ts

@@ -53,7 +53,7 @@ export class SliderBase extends ProgressBar
 
     constructor(options: DoubleSliderOptions)
     {
-        super();
+        super(options);
 
         this.setBackground(options.bg);
 

src/stories/slider/DoubleSliderNineSlicePlane.stories.ts

@@ -0,0 +1,93 @@
+import { action } from '@storybook/addon-actions';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { DoubleSlider } from '../../DoubleSlider';
+import { centerElement } from '../../utils/helpers/resize';
+import { preload } from '../utils/loader';
+import { Container } from '@pixi/display';
+import type { StoryFn } from '@storybook/types';
+
+const args = {
+    fontColor: '#FFFFFF',
+    min: 0,
+    max: 100,
+    value1: 15,
+    value2: 85,
+    fontSize: 20,
+    showValue: true,
+    showFill: true,
+    width: 500,
+    height: 38,
+    onChange: action('Slider')
+};
+
+export const Double: StoryFn = ({
+    min,
+    max,
+    value1,
+    value2,
+    fontSize,
+    fontColor,
+    onChange,
+    showValue,
+    showFill,
+    width,
+    height
+}: any) =>
+{
+    const view = new Container();
+
+    const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png'];
+
+    preload(assets).then(() =>
+    {
+    // Component usage !!!
+        const singleSlider = new DoubleSlider({
+            bg: 'slider_bg.png',
+            fill: showFill ? 'slider_progress.png' : null,
+            slider1: 'slider.png',
+            slider2: 'slider.png',
+            nineSlicePlane: {
+                bg: [250, 19, 250, 19],
+                fill: [245, 15, 245, 15]
+            },
+            fillPaddings: {
+                top: 2.5,
+                left: 5,
+                right: 5,
+                bottom: 7,
+            },
+            min,
+            max,
+            value1,
+            value2,
+            valueTextStyle: {
+                fill: fontColor,
+                fontSize
+            },
+            showValue,
+            valueTextOffset: {
+                y: -40
+            },
+        });
+
+        singleSlider.width = width;
+        singleSlider.height = height;
+
+        singleSlider.onChange.connect((value) => onChange(`${value}`));
+
+        view.addChild(singleSlider);
+
+        centerElement(view);
+    });
+
+    return {
+        view,
+        resize: () => centerElement(view)
+    };
+};
+
+export default {
+    title: 'Components/Slider/SpriteNineSlicePlane',
+    argTypes: argTypes(args),
+    args: getDefaultArgs(args)
+};

src/stories/slider/SliderNineSlicePlane.stories.ts

@@ -0,0 +1,89 @@
+import { action } from '@storybook/addon-actions';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { Slider } from '../../Slider';
+import { centerElement } from '../../utils/helpers/resize';
+import { preload } from '../utils/loader';
+import { Container } from '@pixi/display';
+import type { StoryFn } from '@storybook/types';
+
+const args = {
+    fontColor: '#FFFFFF',
+    min: 0,
+    max: 100,
+    value: 50,
+    fontSize: 20,
+    showValue: true,
+    showFill: true,
+    width: 500,
+    height: 38,
+    onChange: action('Slider')
+};
+
+export const Single: StoryFn = ({
+    min,
+    max,
+    value,
+    fontSize,
+    fontColor,
+    onChange,
+    showValue,
+    showFill,
+    width,
+    height
+}: any) =>
+{
+    const view = new Container();
+
+    const assets = ['slider_bg.png', 'slider.png', 'slider_progress.png'];
+
+    preload(assets).then(() =>
+    {
+    // Component usage !!!
+        const singleSlider = new Slider({
+            bg: 'slider_bg.png',
+            fill: showFill ? 'slider_progress.png' : null,
+            slider: 'slider.png',
+            nineSlicePlane: {
+                bg: [250, 19, 250, 19],
+                fill: [245, 15, 245, 15]
+            },
+            fillPaddings: {
+                top: 2.5,
+                left: 5,
+                right: 5,
+                bottom: 7,
+            },
+            min,
+            max,
+            value,
+            valueTextStyle: {
+                fill: fontColor,
+                fontSize
+            },
+            showValue,
+            valueTextOffset: {
+                y: -40
+            },
+        });
+
+        singleSlider.width = width;
+        singleSlider.height = height;
+
+        singleSlider.onChange.connect((value) => onChange(`${value}`));
+
+        view.addChild(singleSlider);
+
+        centerElement(view);
+    });
+
+    return {
+        view,
+        resize: () => centerElement(view)
+    };
+};
+
+export default {
+    title: 'Components/Slider/SpriteNineSlicePlane',
+    argTypes: argTypes(args),
+    args: getDefaultArgs(args)
+};