Unify range slider styling sample between platforms. (#691)

skrustev · web-flow · commit 360a55119710 · 2024-11-05T09:14:38.000+02:00
diff --git a/samples/inputs/slider/styling/index.html b/samples/inputs/slider/styling/index.html
@@ -14,8 +14,14 @@
   <body>
     <div id="root">
       <div class="container sample center">
-        <igc-slider value="40">
-        </igc-slider>
+        <div class="slider-container">
+          <span class="slider-label">Slider</span>
+          <igc-slider value="40"></igc-slider>
+        </div>
+        <div class="slider-container">
+          <span class="slider-label">Range Slider</span>
+          <igc-range-slider lower="20" upper="70"></igc-range-slider>
+        </div>
       </div>
     </div>
     <!-- This script is needed only for parcel and it will be excluded for webpack -->
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.ts b/samples/inputs/slider/styling/src/index.ts
@@ -1,8 +1,9 @@
-import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './SliderStyling.css';
 
 defineComponents(IgcSliderComponent);
+defineComponents(IgcRangeSliderComponent);
 
 export class SliderTicks {
     constructor() {
