Fixed color to use Semantic UI like

Author: Genarito

.storybook/preview.js

@@ -7,6 +7,6 @@ export const parameters = {
     }
   },
   backgrounds: {
-    default: 'dark'
+    default: 'light'
   }
 }

src/components/MultiRangeSlider.tsx

@@ -39,7 +39,8 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
     margin = 0,
     showLabels = false,
     disabled = false,
-    color = 'Green'
+    inverted = false,
+    color = 'green'
   } = props
 
   /**
@@ -114,8 +115,9 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
       <SliderTracks
         left={left}
         width={width}
-        backgroundColor={color}
+        color={color}
         disabled={disabled}
+        inverted={inverted}
       >
         {renderLabels()}
       </SliderTracks>

src/components/SingleRangeSlider.tsx

@@ -29,10 +29,11 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
     defaultMinValue,
     defaultMaxValue,
     value,
-    color = 'Green',
+    color = 'green',
     showLabels = false,
     step = 1,
     disabled = false,
+    inverted = false,
     onChange
   } = props
 
@@ -84,7 +85,7 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
         className={`thumb thumb--left ${disabledClass}`}
       />
 
-      <SliderTracks width={selectedPercent} backgroundColor={color} disabled={disabled}>
+      <SliderTracks width={selectedPercent} color={color} disabled={disabled} inverted={inverted}>
         {renderLabels()}
       </SliderTracks>
     </>

src/components/SliderTracks.tsx

@@ -1,3 +1,5 @@
+import { RangeColor } from '../types'
+
 /** Component props. */
 interface SliderTracksProps {
   /** Labels component. */
@@ -7,9 +9,11 @@ interface SliderTracksProps {
   /** Track width. */
   width: string;
   /** Track color. */
-  backgroundColor: string;
+  color: RangeColor;
   /** Disabled prop. */
   disabled: boolean;
+  /** Inverted prop. */
+  inverted: boolean;
 }
 
 /**
@@ -20,12 +24,17 @@ interface SliderTracksProps {
  */
 const SliderTracks = (props: SliderTracksProps) => {
   const disabledClass = props.disabled ? 'disabled' : ''
+  const invertedClass = props.inverted ? 'inverted' : ''
+  const colorClass = props.inverted ? `${invertedClass}-${props.color}` : props.color
 
   return (
-    <div className="slider">
-        <div className={`slider__track ${disabledClass}`} />
+    <div className={`slider ${invertedClass}`}>
+        <div className={`slider__track ${disabledClass} ${invertedClass}`} />
         {props.children}
-        <div style={{ left: props.left, width: props.width, backgroundColor: props.backgroundColor }} className={`slider__range ${disabledClass}`} />
+        <div
+          style={{ left: props.left, width: props.width }}
+          className={`color_track slider__range ${disabledClass} ${colorClass}`}
+        />
     </div>
   )
 }

src/stories/Colors.stories.tsx

@@ -27,7 +27,7 @@ export const Colors = () => {
     setValue(newValue)
   }
 
-  const colors: RangeColor[] = ['RoyalBlue', 'Green', 'BlueViolet', 'Brown', 'Orange', 'Violet', 'Tomato', 'DarkMagenta']
+  const colors: RangeColor[] = ['blue', 'green', 'red', 'brown', 'orange', 'violet', 'yellow', 'teal']
   return colors.map((color) => (
     <h1 key={color}>
       <SingleRangeSlider

src/stories/Inverted.stories.tsx

@@ -0,0 +1,47 @@
+import { ComponentMeta } from '@storybook/react'
+import { SingleRangeSlider } from '../components/SingleRangeSlider'
+import { useState } from 'react'
+import { RangeColor } from '../types'
+
+// Styles
+import './colors.css'
+
+export default {
+  title: 'Example/SingleSlider/Inverted',
+  component: SingleRangeSlider,
+  subcomponents: { SingleRangeSlider },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  }
+} as ComponentMeta<typeof SingleRangeSlider >
+
+export const Inverted = () => {
+  const [value, setValue] = useState<number>(40)
+
+  /**
+   * Handles changes.
+   *
+   * @param newValue - New value.
+   */
+  function handleChange (newValue: number) {
+    setValue(newValue)
+  }
+
+  const colors: RangeColor[] = ['blue', 'green', 'red', 'brown', 'orange', 'violet', 'yellow', 'teal']
+  return colors.map((color) => (
+    <h1 key={color}>
+      <SingleRangeSlider
+        key={color}
+        defaultMinValue={0}
+        defaultMaxValue={100}
+        value={value}
+        color={color}
+        inverted={true}
+        onChange={handleChange}
+      />
+    </h1>
+  ))
+}

src/stories/MultiRangeSlider.stories.tsx

@@ -6,7 +6,10 @@ export default {
   title: 'Example/MultiSlider',
   component: MultiRangeSlider,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
   }
 } as ComponentMeta<typeof MultiRangeSlider >
 
@@ -47,5 +50,6 @@ Basic.args = {
   defaultMaxValue: 100,
   margin: 0,
   disabled: false,
-  color: 'Orange'
+  inverted: true,
+  color: 'orange'
 }

src/stories/SingleSlider.stories.tsx

@@ -6,7 +6,10 @@ export default {
   title: 'Example/SingleSlider',
   component: SingleRangeSlider,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
   }
 } as ComponentMeta<typeof SingleRangeSlider >
 
@@ -38,5 +41,6 @@ Basic.args = {
   defaultMinValue: 0,
   defaultMaxValue: 100,
   disabled: false,
-  color: 'Salmon'
+  inverted: true,
+  color: 'orange'
 }

src/styles.css

@@ -15,7 +15,7 @@
 }
 
 .slider__track {
-  background-color: #ced4da;
+  background-color: rgba(0, 0, 0, 0.05);
   width: 100%;
   z-index: 1;
 }
@@ -44,7 +44,8 @@
 }
 
 /* For Chrome and Firefox browsers */
-.thumb::-webkit-slider-thumb, .thumb::-moz-range-thumb {
+.thumb::-webkit-slider-thumb,
+.thumb::-moz-range-thumb {
   background-color: #f1f5f7;
   border: none;
   border-radius: 50%;
@@ -59,12 +60,17 @@
 
 .slider__left-value,
 .slider__right-value {
-  color: #dee2e6;
+  color: #6c6c6c;
   font-size: 12px;
   margin-top: 20px;
   position: absolute;
 }
 
+.slider.inverted .slider__left-value,
+.slider.inverted .slider__right-value {
+  color: #dee2e6;
+}
+
 .slider__right-value {
   right: 0;
 }
@@ -75,7 +81,129 @@
   cursor: not-allowed;
 }
 
-.slider__range.disabled, .slider__track.disabled {
+.slider__range.disabled,
+.slider__track.disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
+
+/* Colors */
+.slider__track.inverted {
+  background-color: #e2e2e2;
+}
+
+.color_track.red {
+  background-color: #DB2828;
+}
+
+.color_track.inverted-red {
+  background-color: #FF695E;
+}
+
+/* Orange */
+.color_track.orange {
+  background-color: #F2711C;
+}
+
+.color_track.inverted-orange {
+  background-color: #FF851B;
+}
+
+/* Yellow */
+.color_track.yellow {
+  background-color: #FBBD08;
+}
+
+.color_track.inverted-yellow {
+  background-color: #FFE21F;
+}
+
+/* Olive */
+.color_track.olive {
+  background-color: #B5CC18;
+}
+
+.color_track.inverted-olive {
+  background-color: #D9E778;
+}
+
+/* Green */
+.color_track.green {
+  background-color: #21BA45;
+}
+
+.color_track.inverted-green {
+  background-color: #2ECC40;
+}
+
+/* Teal */
+.color_track.teal {
+  background-color: #00B5AD;
+}
+
+.color_track.inverted-teal {
+  background-color: #6DFFFF;
+}
+
+/* Blue */
+.color_track.blue {
+  background-color: #2185D0;
+}
+
+.color_track.inverted-blue {
+  background-color: #54C8FF;
+}
+
+/* Violet */
+.color_track.violet {
+  background-color: #6435C9;
+}
+
+.color_track.inverted-violet {
+  background-color: #A291FB;
+}
+
+/* Purple */
+.color_track.purple {
+  background-color: #A333C8;
+}
+
+.color_track.inverted-purple {
+  background-color: #DC73FF;
+}
+
+/* Pink */
+.color_track.pink {
+  background-color: #E03997;
+}
+
+.color_track.inverted-pink {
+  background-color: #FF8EDF;
+}
+
+/* Brown */
+.color_track.brown {
+  background-color: #A5673F;
+}
+
+.color_track.inverted-brown {
+  background-color: #D67C1C;
+}
+
+/* Grey */
+.color_track.grey {
+  background-color: #767676;
+}
+
+.color_track.inverted-grey {
+  background-color: #DCDDDE;
+}
+
+/* Black */
+.color_track.black {
+  background-color: #1b1c1d;
+}
+
+.color_track.inverted-black {
+  background-color: #545454;
+}