cronapp-framework-js/components/templates/cron-slider.designtime.html

Javascript library for CronApp's projects

<div class="k-widget k-slider k-slider-horizontal crn-select">
    <div class="k-slider-wrap k-slider-buttons">

        <a class="k-button k-button-increase" title="Increase" aria-label="Increase">
            <span class="k-icon k-i-arrow-60-right"></span>
        </a>

        <a class="k-button k-button-decrease" title="Decrease" aria-label="Decrease">
            <span class="k-icon k-i-arrow-60-left"></span>
        </a>

        <ul class="k-reset k-slider-items">
            <li class="k-tick k-first k-tick-large" role="presentation" title="1" style="width: 5%;"><span class="k-label">1</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="2" style="width: 10.25%; line-height: 100.994px;"><span class="k-label">2</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="3" style="width: 10.25%; line-height: 100px;"><span class="k-label">3</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="4" style="width: 10.25%; line-height: 100px;"><span class="k-label">4</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="5" style="width: 10.25%; line-height: 100px;"><span class="k-label">5</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="6" style="width: 10.25%; line-height: 100px;"><span class="k-label">6</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="7" style="width: 10.25%; line-height: 100px;"><span class="k-label">7</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="8" style="width: 10.25%; line-height: 100px;"><span class="k-label">8</span></li>
            <li class="k-tick k-tick-large" role="presentation" title="9" style="width: 10.25%; line-height: 100px;"><span class="k-label">9</span></li>
            <li class="k-tick k-last k-tick-large" role="presentation" title="10" style="width: 5%;"><span class="k-label">10</span></li>
        </ul>
        <div class="k-slider-track" style="width: 86%;">

            <div class="k-slider-selection" style="width: 100px;"> </div>

            <a href="#" class="k-draghandle" title="undefined" role="slider" aria-valuemin="1" aria-valuemax="10" aria-valuenow="2" tabindex="0" data-role="draggable" aria-valuetext="2" style="left: 93px;">Drag</a>

            <a href="#" class="k-draghandle k-state-focused k-state-selected" title="undefined" role="slider" aria-valuemin="1" aria-valuemax="10" aria-valuenow="2" tabindex="0" data-role="draggable" aria-valuetext="2" style="left: 93px;">Drag</a>

        </div>
    </div>
</div>