Unify range slider styling sample between platforms.

IgniteUI · Mar 28, 2024 · ef9d5c4 · ef9d5c4
1 parent bb62026
commit ef9d5c4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/samples/inputs/slider/styling/src/SliderStyling.css b/samples/inputs/slider/styling/src/SliderStyling.css
@@ -2,8 +2,12 @@ igc-slider {
     padding: 30px 30px  0px 30px;
 }
 
+igc-range-slider {
+    padding: 30px 30px  0px 30px;
+}
+
 igc-slider::part(thumb) {
-    background: #28a745;
+background: #28a745;
 }
 
 igc-slider::part(thumb):focus {
@@ -14,4 +18,22 @@ igc-slider::part(thumb):focus {
 igc-slider::part(fill) {
     display: block;
     background: #28a745;
+}
+
+igc-range-slider::part(thumb) {
+    background: orange;
+}
+
+igc-range-slider::part(thumb):focus {
+    background: navy;
+    box-shadow: 0 0 0 2px orange;
+}
+
+igc-range-slider::part(track) {
+    display: block;
+    background: navy;
+}
+
+igc-range-slider::part(thumb-label-inner) {
+    background: navy;
 }
diff --git a/samples/inputs/slider/styling/src/index.tsx b/samples/inputs/slider/styling/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrSlider, IgrSliderModule } from 'igniteui-react';
+import { IgrSlider, IgrRangeSlider, IgrSliderModule } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './SliderStyling.css';
 
@@ -16,7 +16,15 @@ export default class SliderStyling extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSlider value="40"/>
+                <div className="slider-container">
+                    <span className="slider-label"> Slider</span>
+                    <IgrSlider value="40"/>
+                </div>
+                <div className="slider-container">
+                    <span className="slider-label"> Range Slider</span>
+                    <IgrRangeSlider lower="20" upper="70">
+                    </IgrRangeSlider>
+                </div>
             </div>
         );
     }