Revise Slider rendering

[jivanova]

Reason

React

 <!--  Flex positioning through tons of inline styles. -->
<div class="k-slider k-state-default k-slider-horizontal">
  <div class="k-slider-wrap k-slider-buttons" style="display: flex; position: relative; flex-direction: row;">
    <a class="k-button k-button-decrease" title="Decrease" style="position: relative;">
       <span class="k-icon k-i-arrow-w"></span>
    </a>
    <div class="k-slider-track-wrap" style="flex-grow: 1; position: relative; touch-action: none; margin-left: 0.5rem; margin-right: 0.5rem;">
        <ul class="k-reset k-slider-items" style="margin: 0px;">
          <li role="presentation" class="k-tick k-tick-large" style="z-index: 1; position: absolute; left: 0%; width: 1px;">
            <span data-slider-label="true" class="k-label" style="position: absolute; width: 40px; left: -20px;">1</span>
          </li>
           <!-- more ticks -->
        </ul>
        <div class="k-slider-track" style="left: 0px; width: 100%;">
           <div class="k-slider-selection" style="width: 66.6667%;"></div>
           <a class="k-draghandle" title="Drag" style="left: calc(66.6667% - 8px); z-index: 1;"></a>
        </div>
   </div>
   <a class="k-button k-button-increase" title="Increase" style="position: relative;">
     <span class="k-icon k-i-arrow-e"></span>
   </a>
  </div>
</div>

Angular

 <!--  Manually calculated widths for every inner part of slider. -->
<kendo-slider dir="ltr" class="k-slider-horizontal k-slider k-slider-transitions k-widget k-state-default" style="width: 226px;">
    <!--  Classes for label position are set here. ex: `k-slider-topleft`  -->
    <div class="k-slider-wrap k-slider-buttons" style="position: relative;">
           <a class="k-button k-button-decrease">
               <span class="k-icon k-i-arrow-w">
                </span>
           </a>
           <a class="k-button k-button-increase">
                <span class="k-icon k-i-arrow-e">
                </span>
          </a>
          <ul class="k-reset k-slider-items">
                <li class="k-tick k-first" style="width: 5px;">
                </li><li class="k-tick" style="width: 10px;">
                </li>
                     <!-- other ticks -->
          </ul>
          <div class="k-slider-track" style="width: 150px;">
                <div class="k-slider-selection" style="width: 0px;">
                </div>
                <a class="k-draghandle" style="left: -8px;"></a>
         </div>
   </div>
</kendo-slider>

Requirements

These requirements should fit to Slider and RangeSlider. Loggin them as a single enhancement due to usage of same rendering.

• Revise k-state-default presense as a class of the slider
• Revise inline styles in the react rendering vs angular approach.

Component structure

• Sliders support vertical and horizontal orientation
• Buttons should be position on both sides of the track. The slider supports rendering with or without buttons.
• The ticks should be automatically positioned with equally distributed space in between.
• Slider supports only one range. Meaning that there is only one slider selection element.
• Value calculation could be made through css variable ( sliderStart / sliderEnd).
  • RangeSlider would use both sliderStart and sliderEnd, together with two drag handles.
  • Slider will always define the sliderStart as the minimum value and sliderEnd will point to the actual value.
• Labels are supported only for the large ticks and should be positioned according to the ticks position. Slider supports before, after, both tick position in terms of the track.

[joneff]

For a slider supporting a single range:

<div class="k-slider k-slider-horizontal">
    <a class="k-button k-button-decrease">
        <span class="k-icon k-i-arrow-w"></span>
    </a>
    <div class="k-slider-track-wrap">
        <ul class="k-reset k-slider-items">
            <li class="k-tick k-tick-large">
                <span class="k-label">0</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-label">25</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-label">50</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-label">75</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-label">100</span>
            </li>
        </ul>
        <div class="k-slider-track">
            <div class="k-slider-selection"></div>
            <!-- start drag handle is for ranges -->
            <a href="#" class="k-draghandle k-draghandle-start"></a>
            <a href="#" class="k-draghandle k-draghandle-end"></a>
        </div>
    </div>
    <a class="k-button k-button-increase">
        <span class="k-icon k-i-arrow-e"></span>
    </a>
</div>

The above rendering is already implemented for Blazor. It uses flexbox and css vars, so it's no IE 11 compatible, but is compatible with the current rendering.

---

However, my ideal rendering is the following, and it differs significantly:

<div class="k-slider k-slider-horizontal">
    <a class="k-button ..." data-action="increase">
        <span class="k-icon k-i-arrow-w"></span>
    </a>
    <div class="k-slider-track-wrap">
        <ul class="k-slider-ticks">
            <li class="k-tick k-tick-large">
                <span class="k-tick-label">0</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-tick-label">25</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-tick-label">50</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-tick-label">75</span>
            </li>
            <li class="k-tick"></li>
            <li class="k-tick k-tick-large">
                <span class="k-tick-label">100</span>
            </li>
        </ul>
        <div class="k-slider-track">
            <div class="k-slider-range">
                <!-- start thumb is for ranges -->
                <a href="#" class="k-slider-thumb k-slider-thumb-start"></a>
                <a href="#" class="k-slider-thumb k-slider-thumb-end"></a>
            </div>
            <!-- more ranges here -->
        </div>
    </div>
    <a class="k-button ..." data-action="decrease">
        <span class="k-icon k-i-arrow-e"></span>
    </a>
</div>

What are the changes?

• k-slider-items is renamed to k-slider-ticks for consistency.
  • could be k-slider-steps and k-slider-step, because we have smallStep and largeStep configuration options
• k-slider-selection is renamed to k-slider-range
  • selection is perceived as a range that has a fixed start
• k-draghandle is renamed to k-slider-thumb to avoid ambiguity
• thumbs are placed in ranges
• a slider can have one or more ranges

That approach will be breaking not only because of the rendering changes, but because it will use custom properties (css variables) to position the ranges by default. In other words the instead of modifying the nested markup, we could have:

<!-- single range, one thumb -->
<div class="k-slider k-slider-horizontal" style="--kendo-slider-value: 10">...</div>
<!-- single range, two thumbs -->
<div class="k-slider k-slider-horizontal" style="--kendo-slider-start: 5; --kendo-slider-end: 25">...</div>
<!-- multiple ranges -->
<div class="k-slider k-slider-horizontal">
    <div class="k-slider-range" style="--kendo-slider-range-start: 1; --kendo-slider-range-end: 15"></div>
    <!-- more ranges here -->
</div>

In the very distant future, when browsers support attr():

<div class="k-slider k-slider-horizontal" data-value="10">...</div>
<!-- single range, two thumbs -->
<div class="k-slider k-slider-horizontal" data-start="5" data-end="25">...</div>
<!-- multiple ranges -->
<div class="k-slider k-slider-horizontal">
    <div class="k-slider-range" data-range-start="1" data-range-end="15"></div>
    <!-- more ranges here -->
</div>