search

taiga-family / taiga-ui

Angular UI Kit and components library for awesome people
https://taiga-ui.dev
Apache License 2.0
3.27k stars 460 forks source link

🚀 - `Slider` allows to set special ticks/segments order (not only equidistant) #5299

Open nsbarsukov opened 1 year ago

nsbarsukov commented 1 year ago

Description

[segments] accepts number | number[]

<input
    tuiSlider
    type="range"
    [segments]="[0.2, 0.6, 0.8]"
/>

Every number in array - is ratio of slider's track length where to put tick.

giowhatever commented 1 year ago

Hello I want to contribute to this project by taking care of this feature but I'am relativly new and I don't know If I understood correctly. From what I saw the ticks on the slider are crated in the slider.style.less file in the kit project: line 31

@ticks-gradient: repeating-linear-gradient( to right, var(--tui-base-06) 0 @ticks-thickness, transparent 0 var(--tui-slider-segment-width)

The problem here is that with the repeating-linear-gradient() function we can't redraw the tick at a different inteval If I'm right. Any suggestion on how can intervene? Thank you.

waterplea commented 1 week ago

If it's an array – we can switch from repeating-linear-gradient to multiple gradients since CSS background supports multiple layers.