diff --git a/samples/inputs/slider/styling/index.html b/samples/inputs/slider/styling/index.html index c423875d1a..c81b1696ba 100644 --- a/samples/inputs/slider/styling/index.html +++ b/samples/inputs/slider/styling/index.html @@ -14,8 +14,14 @@
- - +
+ Slider + +
+
+ Range Slider + +
diff --git a/samples/inputs/slider/styling/src/SliderStyling.css b/samples/inputs/slider/styling/src/SliderStyling.css index 10bfe54c50..8ed9188737 100644 --- 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; } \ No newline at end of file diff --git a/samples/inputs/slider/styling/src/index.ts b/samples/inputs/slider/styling/src/index.ts index a54f83b6ff..0381a907b6 100644 --- 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() {