feat(kit): Slider new design (#4927)

taiga-family · Nov 24, 2023 · e7f9769 · e7f9769
1 parent cddebce
commit e7f9769
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 28 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -35,7 +35,8 @@
         "callout",
         "retrowave",
         "replicants",
-        "tuiiconbutton"
+        "tuiiconbutton",
+        "hitbox"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [

diff --git a/projects/core/styles/mixins/slider.less b/projects/core/styles/mixins/slider.less
@@ -1,6 +1,6 @@
 @thumb-diameters: {
     @s: 0.5rem;
-    @m: 1rem;
+    @m: 0.75rem;
 };
 
 .tui-slider-ticks-labels(@input-size: m) {

diff --git a/projects/kit/components/input-slider/input-slider.style.less b/projects/kit/components/input-slider/input-slider.style.less
@@ -9,12 +9,13 @@
 
 // Don't change CSS-selector (we require the such specificity to override default styles without !important)
 input[type='range'] {
+    @left-gap: calc(var(--tui-radius-m) / 2);
     position: absolute;
     top: 100%;
-    left: 0;
+    left: @left-gap;
     right: 0;
+    width: calc(100% - @left-gap); // Double check Firefox if you want to set `width: auto`
     box-sizing: border-box;
-    padding-left: calc(var(--tui-radius-m) / 2);
     height: 1rem;
     margin: -0.5625rem 0 0;
     border-top-left-radius: 0;

diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less
@@ -4,6 +4,8 @@
 @extra-click-area-space: 0.4375rem;
 @tick-thickness: 0.25rem;
 
+@thumb-shift: 1px;
+
 :host {
     position: relative;
     display: block;
@@ -47,7 +49,7 @@
         right: var(--right);
         height: 100%;
         background: var(--tui-primary);
-        margin: 0 (-@thumb-width / 2);
+        margin: 0 calc(-@thumb-width / 2 - @thumb-shift);
     }
 
     /* Ticks */
@@ -124,22 +126,15 @@
     right: 0;
     z-index: 1;
     transform: translate(0, -50%);
+    // TODO: drop in v4.0 (it will be already done inside Slider)
     margin: 0; /* Drop browser default margins */
 
-    &:last-of-type::-webkit-slider-thumb {
-        transform: translate(50%, 0);
-    }
-
-    &:first-of-type::-webkit-slider-thumb {
-        transform: translate(-50%, 0);
-    }
-
-    &:last-of-type::-moz-range-thumb {
-        transform: translate(50%, 0);
+    &:last-of-type {
+        --tui-slider-thumb-transform: translateX(50%) translateX(@thumb-shift);
     }
 
-    &:first-of-type::-moz-range-thumb {
-        transform: translate(-50%, 0);
+    &:first-of-type {
+        --tui-slider-thumb-transform: translateX(-50%) translateX(-@thumb-shift);
     }
 
     :host._disabled & {

diff --git a/projects/kit/components/slider/helpers/slider-thumb-label/slider-thumb-label.component.ts b/projects/kit/components/slider/helpers/slider-thumb-label/slider-thumb-label.component.ts
@@ -28,7 +28,7 @@ export class TuiSliderThumbLabelComponent implements AfterContentInit {
     }
 
     get ratio(): number {
-        return (this.slider?.valuePercentage || 0) / 100;
+        return this.slider?.valueRatio || 0;
     }
 
     get ghostLeft(): number {

diff --git a/projects/kit/components/slider/slider.component.ts b/projects/kit/components/slider/slider.component.ts
@@ -84,9 +84,14 @@ export class TuiSliderComponent {
         this.el.nativeElement.value = `${newValue}`;
     }
 
+    @HostBinding('style.--tui-slider-fill-ratio')
+    get valueRatio(): number {
+        return (this.value - this.min) / (this.max - this.min) || 0;
+    }
+
     @HostBinding('style.--tui-slider-fill-percentage.%')
     get valuePercentage(): number {
-        return (100 * (this.value - this.min)) / (this.max - this.min) || 0;
+        return 100 * this.valueRatio;
     }
 
     @HostBinding('style.--tui-slider-segment-width.%')

diff --git a/projects/kit/components/slider/slider.style.less b/projects/kit/components/slider/slider.style.less
@@ -12,6 +12,15 @@
 @track-color: var(--tui-slider-track-color);
 @thumb-color: currentColor;
 
+@hitbox: 1rem;
+
+@transform-noop: scale(1);
+
+@active-thumb-scale-factor: {
+    @s: 1.5;
+    @m: 1.333;
+};
+
 .customize-track(@progress-filling, @thumb-width) {
     height: @track-height;
     border-radius: inherit;
@@ -55,22 +64,44 @@
 }
 
 .customize-thumb(@size) {
+    .transition(transform);
+    isolation: isolate;
     appearance: none;
     background-color: @thumb-color;
-    border: none;
+    box-shadow: none;
     border-radius: 50%;
     height: @thumb-diameters[@@size];
     width: @thumb-diameters[@@size];
 
+    /* Increase vertical hitbox by trasparent borders */
+    box-sizing: content-box;
+    background-clip: content-box;
+    border: ((@hitbox - @thumb-diameters[@@size]) / 2) solid transparent;
+    border-left: 0;
+    border-right: 0;
+    transform: var(--tui-slider-thumb-transform, @transform-noop);
+
     :not(:disabled)& {
         cursor: ew-resize;
 
+        /*
+        TODO: delete it in v4.0
+        New version of slider doesn't change color for ":hover" or ":active" states.
+        Don't forget to update this example (just use css property "color" for host):
+        https://taiga-ui.dev/components/slider#colors
+         */
         &:hover {
-            background: var(--tui-primary-hover);
+            background-color: var(--tui-primary-hover);
+        }
+
+        // TODO: delete it in v4.0
+        :active& {
+            background-color: var(--tui-primary-active);
         }
 
-        &:active {
-            background: var(--tui-primary-active);
+        &:hover,
+        :active& {
+            transform: var(--tui-slider-thumb-transform, @transform-noop) scale(@active-thumb-scale-factor[@@size]);
         }
     }
 
@@ -80,11 +111,38 @@
 }
 
 /* Vertically centers thumb on the track (webkit only) */
-.vertically-align-thumb(@size) {
-    margin-top: (@track-height / 2) - (@thumb-diameters[@@size] / 2);
+.vertically-align-thumb() {
+    margin-top: (@track-height / 2) - (@hitbox / 2);
+}
+
+.thumb-ghost(@size) {
+    position: absolute;
+    top: ((@hitbox - @thumb-diameters[@@size]) / 2);
+    left: calc(var(--tui-slider-fill-percentage) - var(--tui-slider-fill-ratio) * @thumb-diameters[@@size]);
+    width: @thumb-diameters[@@size];
+    height: @thumb-diameters[@@size];
+    border-radius: 50%;
+    transform: var(--tui-slider-thumb-transform, @transform-noop);
+}
+
+.thumb-overlay(@size) {
+    &:not(:disabled):before {
+        .transition(~'transform, opacity');
+        .thumb-ghost(@size);
+        content: '';
+        cursor: ew-resize;
+        background: @thumb-color;
+        opacity: 0;
+    }
+
+    &:active:before {
+        opacity: 0.2;
+        transform: var(--tui-slider-thumb-transform, @transform-noop) scale(2.33);
+    }
 }
 
 :host {
+    position: relative;
     display: block;
     width: 100%;
     color: var(--tui-primary); /* See currentColor inside this file */
@@ -100,12 +158,20 @@
         opacity: var(--tui-disabled-opacity);
         cursor: auto;
     }
+
+    &[data-size='s'] {
+        .thumb-overlay(s);
+    }
+
+    &[data-size='m'] {
+        .thumb-overlay(m);
+    }
 }
 
 :host:not(._old-edge) {
     appearance: none;
     height: @track-height;
-    padding: 0.4375rem 0; /* To catch click events nearby THIN input's track */
+    padding: ((@hitbox - @track-height) / 2) 0; /* To catch click events nearby THIN input's track */
     background-color: transparent;
     background-clip: content-box; /* To clip filling of paddings */
     outline: none;
@@ -133,12 +199,12 @@
 
     &[data-size='m']::-webkit-slider-thumb {
         .customize-thumb(m);
-        .vertically-align-thumb(m);
+        .vertically-align-thumb();
     }
 
     &[data-size='s']::-webkit-slider-thumb {
         .customize-thumb(s);
-        .vertically-align-thumb(s);
+        .vertically-align-thumb();
     }
 
     &[data-size='m']::-moz-range-thumb {