feat: Added slider step support

pixijs · Jul 30, 2024 · be80702 · be80702
1 parent 544a82a
commit be80702
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/src/Slider.ts b/src/Slider.ts
@@ -7,6 +7,7 @@ import { BaseSliderOptions, SliderBase } from './SliderBase';
 
 export type SliderOptions = BaseSliderOptions & {
     slider: Container | string;
+    step?: number;
     value?: number;
 };
 
@@ -45,6 +46,10 @@ export class Slider extends SliderBase
         });
 
         this.sliderOptions = options;
+
+        // Avoid zero value
+        this.step = options.step || 1;
+
         this.value = options.value ?? this.min;
         this.updateSlider();
     }
@@ -92,6 +97,17 @@ export class Slider extends SliderBase
         return super.min;
     }
 
+    override set step(value: number)
+    {
+        super.step = value;
+        this.updateSlider();
+    }
+
+    override get step(): number
+    {
+        return super.step;
+    }
+
     /** Set slider instance ot texture. */
     // eslint-disable-next-line accessor-pairs
     set slider(value: Container | string)
@@ -108,9 +124,11 @@ export class Slider extends SliderBase
 
         const obj = event.currentTarget as DragObject;
         const { x } = obj.parent.worldTransform.applyInverse(event.global);
+        const positionRatio = x / (this.bg?.width || 1);
+        const rawValue = this.min + (positionRatio * (this.max - this.min));
 
-        this.progress = this.validate((x / this.bg?.width) * 100);
-        this.value = this.min + (((this.max - this.min) / 100) * this.progress);
+        // Snap the raw value to the nearest step
+        this.value = Math.round(rawValue / this.step) * this.step;
     }
 
     protected override change()

diff --git a/src/SliderBase.ts b/src/SliderBase.ts
@@ -47,6 +47,9 @@ export class SliderBase extends ProgressBar
     /** Maximal value. */
     protected _max = 100;
 
+    /** Progress value step */
+    protected _step = 1;
+
     protected startX!: number;
     protected startUpdateValue1!: number;
     protected startUpdateValue2!: number;
@@ -70,12 +73,12 @@ export class SliderBase extends ProgressBar
     {
         super.init(progressBarOptions);
 
-        if (this.fill) {
+        if (this.fill)
+        {
             this.fill.eventMode = 'none';
         }
     }
 
-
     /**
      * Sets Slider1 instance.
      * @param value - Container or string with texture name.
@@ -269,4 +272,19 @@ export class SliderBase extends ProgressBar
     {
         return this._min;
     }
+
+    /**
+     * Set step value.
+     * @param value
+     */
+    set step(value: number)
+    {
+        this._step = value;
+    }
+
+    /** Get step value. */
+    get step(): number
+    {
+        return this._step;
+    }
 }
diff --git a/src/stories/slider/SliderGraphics.stories.ts b/src/stories/slider/SliderGraphics.stories.ts
@@ -15,6 +15,7 @@ const args = {
     fontColor: '#FFFFFF',
     min: 0,
     max: 100,
+    step: 1,
     value: 50,
     width: 450,
     height: 35,
@@ -29,6 +30,7 @@ const args = {
 export const Single: StoryFn = ({
     min,
     max,
+    step,
     value,
     meshColor,
     borderColor,
@@ -78,6 +80,7 @@ export const Single: StoryFn = ({
         slider,
         min,
         max,
+        step,
         value,
         valueTextStyle: {
             fill: fontColor,

diff --git a/src/stories/slider/SliderNineSlicePlane.stories.ts b/src/stories/slider/SliderNineSlicePlane.stories.ts
@@ -10,6 +10,7 @@ const args = {
     fontColor: '#FFFFFF',
     min: 0,
     max: 100,
+    step: 1,
     value: 50,
     fontSize: 20,
     showValue: true,
@@ -21,6 +22,7 @@ const args = {
 export const Single: StoryFn = ({
     min,
     max,
+    step,
     value,
     fontSize,
     fontColor,
@@ -53,6 +55,7 @@ export const Single: StoryFn = ({
             },
             min,
             max,
+            step,
             value,
             valueTextStyle: {
                 fill: fontColor,

diff --git a/src/stories/slider/SliderSprite.stories.ts b/src/stories/slider/SliderSprite.stories.ts
@@ -10,14 +10,15 @@ const args = {
     fontColor: '#FFFFFF',
     min: 0,
     max: 100,
+    step: 1,
     value: 50,
     fontSize: 20,
     showValue: true,
     amount: 1,
     onChange: action('Slider')
 };
 
-export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange, showValue, amount }: any) =>
+export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange, showValue, amount, step }: any) =>
 {
     const view = new List({ type: 'vertical', elementsMargin: 10 });
 
@@ -34,6 +35,7 @@ export const Single: StoryFn = ({ min, max, value, fontSize, fontColor, onChange
                 slider: 'slider.png',
                 min,
                 max,
+                step,
                 value,
                 valueTextStyle: {
                     fill: fontColor,