From 54ab6a5f616746b5f7f3db44cd864bb22755417d Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 9 Aug 2021 12:34:31 -0400
Subject: [PATCH] Update sliders

---
 .../views/actions/base/WiredActionBaseView.tsx  |  7 ++++---
 .../give-reward/WiredActionGiveRewardView.tsx   | 17 ++++++++---------
 ...WiredActionGiveScoreToPredefinedTeamView.tsx | 12 +++++++-----
 .../give-score/WiredActionGiveScoreView.tsx     | 12 +++++++-----
 .../WiredActionMoveFurniToView.tsx              |  7 ++++---
 .../mute-user/WiredActionMuteUserView.tsx       |  7 ++++---
 .../WiredConditionTimeElapsedLessView.tsx       |  7 ++++---
 .../WiredConditionTimeElapsedMoreView.tsx       |  7 ++++---
 .../WiredConditionUserCountInRoomView.tsx       | 12 +++++++-----
 .../WiredTriggerExecuteOnceView.tsx             |  7 ++++---
 .../WiredTriggerExecutePeriodicallyLongView.tsx |  7 ++++---
 .../WiredTriggerExecutePeriodicallyView.tsx     |  7 ++++---
 .../WiredTriggerScoreAchievedView.tsx           |  7 ++++---
 13 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/src/views/wired/views/actions/base/WiredActionBaseView.tsx b/src/views/wired/views/actions/base/WiredActionBaseView.tsx
index cecd0b5b..0d7a4efa 100644
--- a/src/views/wired/views/actions/base/WiredActionBaseView.tsx
+++ b/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 
-                    value={ delay }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 0 }
                     max={ 20 }
+                    value={ delay }
                     onChange={ event => setDelay(event) } />
             </div>
         </WiredBaseView>
diff --git a/src/views/wired/views/actions/give-reward/WiredActionGiveRewardView.tsx b/src/views/wired/views/actions/give-reward/WiredActionGiveRewardView.tsx
index 0d857a67..039ddffa 100644
--- a/src/views/wired/views/actions/give-reward/WiredActionGiveRewardView.tsx
+++ b/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 
-                defaultValue={ rewardsLimit }
-                dots={ true }
-                min={ 1 }
-                max={ 1000 }
-                step={ 1 }
-                onChange={ event => setRewardsLimit(event) }
-                /> }
+            { limitEnabled && 
+                <ReactSlider
+                    className={ 'nitro-slider' }
+                    min={ 1 }
+                    max={ 1000 }
+                    value={ rewardsLimit }
+                    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">
diff --git a/src/views/wired/views/actions/give-score-to-predefined-team/WiredActionGiveScoreToPredefinedTeamView.tsx b/src/views/wired/views/actions/give-score-to-predefined-team/WiredActionGiveScoreToPredefinedTeamView.tsx
index 3c5d444a..9e82c14d 100644
--- a/src/views/wired/views/actions/give-score-to-predefined-team/WiredActionGiveScoreToPredefinedTeamView.tsx
+++ b/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 
-                    value={ points }
+                <ReactSlider
+                    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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
             <div className="form-group">
diff --git a/src/views/wired/views/actions/give-score/WiredActionGiveScoreView.tsx b/src/views/wired/views/actions/give-score/WiredActionGiveScoreView.tsx
index 1360e889..3b909fbf 100644
--- a/src/views/wired/views/actions/give-score/WiredActionGiveScoreView.tsx
+++ b/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 
-                    value={ points }
+                <ReactSlider
+                    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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredActionBaseView>
diff --git a/src/views/wired/views/actions/move-furni-to/WiredActionMoveFurniToView.tsx b/src/views/wired/views/actions/move-furni-to/WiredActionMoveFurniToView.tsx
index 96bf209a..c36062f8 100644
--- a/src/views/wired/views/actions/move-furni-to/WiredActionMoveFurniToView.tsx
+++ b/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 
-                    value={ spacing }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 5 }
+                    value={ spacing }
                     onChange={ event => setSpacing(event) } />
             </div>
             <div className="form-group">
diff --git a/src/views/wired/views/actions/mute-user/WiredActionMuteUserView.tsx b/src/views/wired/views/actions/mute-user/WiredActionMuteUserView.tsx
index 1c6f912f..5f4f8c44 100644
--- a/src/views/wired/views/actions/mute-user/WiredActionMuteUserView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
             <div className="form-group">
diff --git a/src/views/wired/views/conditions/time-elapsed-less/WiredConditionTimeElapsedLessView.tsx b/src/views/wired/views/conditions/time-elapsed-less/WiredConditionTimeElapsedLessView.tsx
index 72210acf..65e7252b 100644
--- a/src/views/wired/views/conditions/time-elapsed-less/WiredConditionTimeElapsedLessView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredConditionBaseView>
diff --git a/src/views/wired/views/conditions/time-elapsed-more/WiredConditionTimeElapsedMoreView.tsx b/src/views/wired/views/conditions/time-elapsed-more/WiredConditionTimeElapsedMoreView.tsx
index a8210ccc..5b1fc350 100644
--- a/src/views/wired/views/conditions/time-elapsed-more/WiredConditionTimeElapsedMoreView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredConditionBaseView>
diff --git a/src/views/wired/views/conditions/user-count-in-room/WiredConditionUserCountInRoomView.tsx b/src/views/wired/views/conditions/user-count-in-room/WiredConditionUserCountInRoomView.tsx
index aa07267b..92474103 100644
--- a/src/views/wired/views/conditions/user-count-in-room/WiredConditionUserCountInRoomView.tsx
+++ b/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 
-                    value={ min }
+                <ReactSlider
+                    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 
-                    value={ max }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 50 }
+                    value={ max }
                     onChange={ event => setMax(event) } />
             </div>
         </WiredConditionBaseView>
diff --git a/src/views/wired/views/triggers/execute-once/WiredTriggerExecuteOnceView.tsx b/src/views/wired/views/triggers/execute-once/WiredTriggerExecuteOnceView.tsx
index f9f7cb4c..647ddc9d 100644
--- a/src/views/wired/views/triggers/execute-once/WiredTriggerExecuteOnceView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>
diff --git a/src/views/wired/views/triggers/execute-periodically-long/WiredTriggerExecutePeriodicallyLongView.tsx b/src/views/wired/views/triggers/execute-periodically-long/WiredTriggerExecutePeriodicallyLongView.tsx
index 5a444837..bb0b1d3d 100644
--- a/src/views/wired/views/triggers/execute-periodically-long/WiredTriggerExecutePeriodicallyLongView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 120 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>
diff --git a/src/views/wired/views/triggers/execute-periodically/WiredTriggerExecutePeriodicallyView.tsx b/src/views/wired/views/triggers/execute-periodically/WiredTriggerExecutePeriodicallyView.tsx
index 98049d39..1570aa72 100644
--- a/src/views/wired/views/triggers/execute-periodically/WiredTriggerExecutePeriodicallyView.tsx
+++ b/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 
-                    value={ time }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 60 }
+                    value={ time }
                     onChange={ event => setTime(event) } />
             </div>
         </WiredTriggerBaseView>
diff --git a/src/views/wired/views/triggers/score-achieved/WiredTriggerScoreAchievedView.tsx b/src/views/wired/views/triggers/score-achieved/WiredTriggerScoreAchievedView.tsx
index a6c53191..b950f48d 100644
--- a/src/views/wired/views/triggers/score-achieved/WiredTriggerScoreAchievedView.tsx
+++ b/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 
-                    value={ points }
+                <ReactSlider
+                    className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1000 }
+                    value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
         </WiredTriggerBaseView>