Update sliders

src/views/wired/views/actions/base/WiredActionBaseView.tsx

@@ -1,6 +1,6 @@
 import { WiredActionDefinition } from '@nitrots/nitro-renderer';
-import Slider from 'rc-slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { GetWiredTimeLocale } from '../../../common/GetWiredTimeLocale';
 import { useWiredContext } from '../../../context/WiredContext';
@@ -34,10 +34,11 @@ export const WiredActionBaseView: FC<WiredActionBaseViewProps> = props =>
             </> }
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(delay) ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ delay }
+                    className={ 'nitro-slider' }
                     min={ 0 }
                     max={ 20 }
+                    value={ delay }
                     onChange={ event => setDelay(event) } />
             </div>
         </WiredBaseView>

src/views/wired/views/actions/give-reward/WiredActionGiveRewardView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -105,14 +105,13 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
             { !limitEnabled && <div className="bg-muted rounded small text-black p-1 text-center">
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
                 </div> }
-            { limitEnabled && <Slider 
+            { limitEnabled && 
-                defaultValue={ rewardsLimit }
+                <ReactSlider
-                dots={ true }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1000 }
-                step={ 1 }
+                    value={ rewardsLimit }
-                onChange={ event => setRewardsLimit(event) }
+                    onChange={ event => setRewardsLimit(event) } /> }
-                /> }
             <hr className="my-1 mb-2 bg-dark" />
             <div className="fw-bold">How ofter can a user be rewarded?</div>
             <div className="d-flex">

src/views/wired/views/actions/give-score-to-predefined-team/WiredActionGiveScoreToPredefinedTeamView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -37,18 +37,20 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ points }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
+                    value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
             <div className="form-group">

src/views/wired/views/actions/give-score/WiredActionGiveScoreView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -34,18 +34,20 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ points }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
+                    value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredActionBaseView>

src/views/wired/views/actions/move-furni-to/WiredActionMoveFurniToView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -53,10 +53,11 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ spacing }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 5 }
+                    value={ spacing }
                     onChange={ event => setSpacing(event) } />
             </div>
             <div className="form-group">

src/views/wired/views/actions/mute-user/WiredActionMuteUserView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -27,10 +27,11 @@ export const WiredActionMuteUserView: FC<{}> = props =>
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.length.minutes', ['minutes'], [ time.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
             <div className="form-group">

src/views/wired/views/conditions/time-elapsed-less/WiredConditionTimeElapsedLessView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { GetWiredTimeLocale } from '../../../common/GetWiredTimeLocale';
 import { useWiredContext } from '../../../context/WiredContext';
@@ -25,10 +25,11 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredConditionBaseView>

src/views/wired/views/conditions/time-elapsed-more/WiredConditionTimeElapsedMoreView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { GetWiredTimeLocale } from '../../../common/GetWiredTimeLocale';
 import { useWiredContext } from '../../../context/WiredContext';
@@ -25,10 +25,11 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredConditionBaseView>

src/views/wired/views/conditions/user-count-in-room/WiredConditionUserCountInRoomView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -34,18 +34,20 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group mb-2">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ min }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 50 }
+                    value={ min }
                     onChange={ event => setMin(event) } />
             </div>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ max }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 50 }
+                    value={ max }
                     onChange={ event => setMax(event) } />
             </div>
         </WiredConditionBaseView>

src/views/wired/views/triggers/execute-once/WiredTriggerExecuteOnceView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { GetWiredTimeLocale } from '../../../common/GetWiredTimeLocale';
 import { useWiredContext } from '../../../context/WiredContext';
@@ -25,10 +25,11 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>

src/views/wired/views/triggers/execute-periodically-long/WiredTriggerExecutePeriodicallyLongView.tsx

@@ -1,6 +1,6 @@
 import { FriendlyTime } from '@nitrots/nitro-renderer';
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -25,10 +25,11 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 120 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>

src/views/wired/views/triggers/execute-periodically/WiredTriggerExecutePeriodicallyView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { GetWiredTimeLocale } from '../../../common/GetWiredTimeLocale';
 import { useWiredContext } from '../../../context/WiredContext';
@@ -25,10 +25,11 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ time }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 60 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>

src/views/wired/views/triggers/score-achieved/WiredTriggerScoreAchievedView.tsx

@@ -1,5 +1,5 @@
-import Slider from 'rc-slider/lib/Slider';
 import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useWiredContext } from '../../../context/WiredContext';
 import { WiredFurniType } from '../../../WiredView.types';
@@ -24,10 +24,11 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
         <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
             <div className="form-group">
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</label>
-                <Slider 
+                <ReactSlider
-                    value={ points }
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1000 }
+                    value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
         </WiredTriggerBaseView>