Slider ticks

CHANGELOG.md

@@ -56,19 +56,30 @@ All notable changes for each version of this project will be documented in this
         </ng-template>
     </igx-grid>
     ```
-    - `IgxCarousel`:
-        - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
-        - `gesturesSupport` input is added, which can be used to enable and disable gestures
-        - `maximumIndicatorsCount` input is added, which can be used to set the number of visible indicators
-        - `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
-        - `animationType` input is added, which can be used to set animation when changing slides
-        - `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
-        - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
-        - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
+- `IgxSlider`:
+    - `primaryTicks` input was added. Which sets the number of primary ticks
+    - `secondaryTicks` input was added. Which sets the number of secondary ticks.
+    - `showTicks` input was added. Which show/hide all slider ticks and tick labels.
+    - `primaryTickLabels` input was added. Which shows/hides all primary tick labels.
+    - `secondaryTickLabels` input was added. Shows/hides all secondary tick labels.
+    - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
+    - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
+    - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
+
+- `IgxCarousel`:
+    - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
+    - `gesturesSupport` input is added, which can be used to enable and disable gestures
+    - `maximumIndicatorsCount` input is added, which can be used to set the number of visible indicators
+    - `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
+    - `animationType` input is added, which can be used to set animation when changing slides
+    - `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
+    - `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
+    - `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
 
 - `IgxSelect`: 
     - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
 
+
 ## 8.2.6
 
 ### New Features

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss

@@ -22,8 +22,44 @@
         @extend %igx-slider-track-fill !optional;
     }
 
-    @include e(track-ticks) {
-        @extend %igx-slider-track-ticks !optional;
+    @include e(ticks) {
+        @extend %igx-slider__ticks !optional;
+    }
+
+    @include e(ticks, $m: tall) {
+        @extend %igx-slider__ticks--tall !optional;
+    }
+
+    @include e(ticks, $m: top) {
+        @extend %igx-slider__ticks--top !optional;
+    }
+
+    @include e(tick-label, $m: hidden) {
+        @extend %igx-slider__tick-label--hidden !optional;
+    }
+
+    @include e(tick-labels, $m: top-bottom) {
+        @extend %igx-slider__tick-labels--top-bottom !optional;
+    }
+
+    @include e(tick-labels, $m: bottom-top) {
+        @extend %igx-slider__tick-labels--bottom-top !optional;
+    }
+
+    @include e(ticks-group) {
+        @extend %igx-slider__ticks-group !optional;
+    }
+
+    @include e(ticks-group, $m: tall) {
+        @extend %igx-slider__ticks-group--tall !optional;
+    }
+
+    @include e(ticks-tick) {
+        @extend %igx-slider__ticks-tick !optional;
+    }
+
+    @include e(ticks-label) {
+        @extend %igx-slider__ticks-label !optional;
     }
 
     @include e(thumbs) {
@@ -76,6 +112,10 @@
         }
     }
 
+    @include e(track-steps) {
+        @extend %igx-slider-track-steps !optional;
+    }
+
     @include m(disabled) {
         @extend %igx-slider-display !optional;
 
@@ -84,14 +124,21 @@
             @extend %igx-slider-track--disabled !optional;
         }
 
+        @include e(track-steps) {
+            @extend %igx-slider-track-steps--disabled !optional;
+        }
+
         @include e(track-fill) {
             @extend %igx-slider-track-fill !optional;
             @extend %igx-slider-track-fill--disabled !optional;
         }
 
-        @include e(track-ticks) {
-            @extend %igx-slider-track-ticks !optional;
-            @extend %igx-slider-track-ticks--disabled !optional;
+        @include e(ticks-tick) {
+            @extend %igx-slider__tick--disabled !optional;
+        }
+
+        @include e(ticks-label) {
+            @extend %igx-slider__ticks-labels--disabled !optional;
         }
 
         @each $t in $thumbs {

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -17,6 +17,11 @@
 /// @param {Color} $base-track-color [null] - The base background color of the track.
 /// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.
 ///
+/// @param {Color} $tick-label-color [null] - The color of the tick label.
+/// @param {Color} $tick-label-color--tall [null] - The color of the tall tick label .
+/// @param {Color} $tick-color [null] - The background-color of the tick.
+/// @param {Color} $tick-color--tall [null] - The background-color of the tall tick.
+///
 /// @requires $default-palette
 /// @requires $light-schema
 /// @requires apply-palette
@@ -44,7 +49,11 @@
     $thumb-disabled-border-color: null,
     $track-hover-color: null,
     $thumb-hover-color: null,
-    $base-track-hover-color: null
+    $base-track-hover-color: null,
+    $tick-label-color: null,
+    $tick-label-color-tall: null,
+    $tick-color: null,
+    $tick-color-tall: null,
 ) {
     $name: 'igx-slider';
     $slider-schema: ();
@@ -75,7 +84,11 @@
         disabled-base-track-color: $disabled-base-track-color,
         thumb-border-color: $thumb-border-color,
         thumb-disabled-border-color: $thumb-disabled-border-color,
-        base-track-hover-color: $base-track-hover-color
+        base-track-hover-color: $base-track-hover-color,
+        tick-label-color: $tick-label-color,
+        tick-label-color-tall: $tick-label-color-tall,
+        tick-color: $tick-color,
+        tick-color-tall: $tick-color-tall,
     ));
 }
 
@@ -96,6 +109,13 @@
         fluent: 4px
     ), map-get($theme, variant));
 
+    // Slide ticks
+    $tick-push: rem(4px);
+    $base-tick-height: rem(8px);
+    $tick-height: $base-tick-height;
+    $tick-height--tall: $base-tick-height * 2;
+    $tick-width: rem(2px);
+
     $thumb-border-width: map-get((
         material: 0,
         fluent: 2px
@@ -165,10 +185,11 @@
         height: 0;
         cursor: default;
         z-index: 1;
+        left: 0;
     }
 
     %igx-slider-track {
-        position: absolute;
+        position: relative;
         width: 100%;
         height: rem($slider-track-height);
         background: --var($theme, 'base-track-color');
@@ -179,7 +200,110 @@
         background: --var($theme, 'disabled-base-track-color');
     }
 
-    %igx-slider-track-ticks {
+    %igx-slider-track-fill {
+        position: absolute;
+        width: 100%;
+        height: inherit;
+        background: --var($theme, 'track-color');
+        transform-origin: #{$left} center;
+        transform: scaleX(0);
+    }
+
+    %igx-slider-track-fill--disabled {
+        visibility: hidden;
+    }
+
+    %igx-slider__ticks {
+        width: 100%;
+        display: flex;
+        position: absolute;
+        top: $tick-push;
+        justify-content: space-between;
+        z-index: 1;
+
+        &%igx-slider__ticks--top {
+            bottom: $tick-push;
+            top: auto;
+            align-items: flex-end;
+        }
+    }
+
+    %igx-slider__ticks-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+
+        &:first-of-type {
+            margin-left: rem(-1px);
+        }
+
+        &:last-of-type {
+            margin-left: rem(-1px);
+        }
+    }
+
+    %igx-slider__ticks-label {
+        color: --var($theme, 'tick-label-color');
+        position: absolute;
+        top: $tick-height--tall;
+        transform: translate(-50%);
+        line-height: .7;
+        opacity: 1;
+        transition: opacity .2s $ease-in-out-quad;
+    }
+
+    %igx-slider__ticks-tick {
+        background: --var($theme, 'tick-color');
+        height: $tick-height;
+        width: $tick-width;
+    }
+
+    %igx-slider__ticks--tall {
+        %igx-slider__ticks-label {
+            top: calc(#{$tick-height--tall} + #{$tick-height});
+        }
+    }
+
+    %igx-slider__tick--disabled {
+        background: --var($theme, 'disabled-base-track-color')!important;
+    }
+
+    %igx-slider__ticks-labels--disabled {
+        color: --var($theme, 'disabled-base-track-color')!important;
+    }
+
+    %igx-slider__ticks-group--tall {
+        %igx-slider__ticks-tick {
+            height: $tick-height--tall;
+            background: --var($theme, 'tick-color-tall');
+        }
+
+        %igx-slider__ticks-label {
+            top: calc(#{$tick-height--tall} + #{$tick-height});
+            color: --var($theme, 'tick-label-color-tall');
+        }
+    }
+
+    %igx-slider__ticks--top {
+        %igx-slider__ticks-label {
+            bottom: calc(#{$tick-height} + #{$tick-height});
+            top: auto;
+        }
+
+        &%igx-slider__ticks--tall {
+            %igx-slider__ticks-label {
+                bottom: calc(#{$tick-height--tall} + #{$tick-height});
+                top: auto;
+            }
+        }
+    }
+
+    %igx-slider__tick-label--hidden {
+        opacity: 0;
+    }
+
+    %igx-slider-track-steps {
         position: absolute;
         width: 100%;
         height: rem($slider-track-height);
@@ -189,21 +313,63 @@
         z-index: 1;
     }
 
-    %igx-slider-track-ticks--disabled {
+    %igx-slider-track-steps--disabled {
         visibility: hidden;
     }
 
-    %igx-slider-track-fill {
-        position: absolute;
-        width: 100%;
-        height: inherit;
-        background: --var($theme, 'track-color');
-        transform-origin: #{$left} center;
-        transform: scaleX(0);
+    %igx-slider__tick-labels--top-bottom {
+        %igx-slider__ticks-group {
+            display: block;
+        }
+
+        %igx-slider__ticks-label {
+            writing-mode: vertical-rl;
+            transform: translate(-50%) rotate(0deg);
+        }
+
+        %igx-slider__ticks--tall {
+            %igx-slider__ticks-label {
+                top: calc(#{$tick-height--tall} + #{rem(2px)});
+            }
+        }
+
+        &%igx-slider__ticks--top {
+            %igx-slider__ticks-label {
+                writing-mode: vertical-rl;
+                transform: translate(-50%) rotate(0deg);
+            }
+
+            %igx-slider__ticks--tall {
+                %igx-slider__ticks-label {
+                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
+                }
+            }
+        }
     }
 
-    %igx-slider-track-fill--disabled {
-        visibility: hidden;
+    %igx-slider__tick-labels--bottom-top {
+        %igx-slider__ticks-group {
+            display: block;
+        }
+
+
+        %igx-slider__ticks-label {
+            writing-mode: vertical-rl;
+            transform: translate(-50%) rotate(180deg);
+        }
+
+        &%igx-slider__ticks--top {
+            %igx-slider__ticks-label {
+                writing-mode: vertical-rl;
+                transform: translate(-50%) rotate(180deg);
+            }
+
+            %igx-slider__ticks--tall {
+                %igx-slider__ticks-label {
+                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});
+                }
+            }
+        }
     }
 
     %igx-thumb-display {