Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Слайдер не симметричный


Автор: Voldemar2004 14.4.2016, 22:04
Сделал слайдер, который меняет значения от 0 до 10 с шагом 0.1. Но надо сделать, чтобы значения продолжались после 10 до 100 с шагом 10. Но тогда значения от 0 до 10 выбрать очень тяжело, т.к. они занимают ничтожную долю слайдера, можно ли как-то сделать, чтобы [0, 10] с шагом 0.1 были от левого края до половины слайдера, а [10, 100] с шагом 10 от середины до правого края слайдера?

Как на спидометре, типа:

до 10 шаг 0.1, после 10 шаг 10

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
0   0.5   1   1.5    2    2.5    3    3.5    4    4.5    5   5.5   6   6.5   7   7.5   8   8.5    9   9.5   10    20   30   40   50   60   70   80   90   100

Автор: Voldemar2004 14.4.2016, 22:46
http://stackoverflow.com/questions/7267676/jquery-slider-ui-dynamic-step-size

http://jsfiddle.net/bouillard/Uy5sD/

Код

<p>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" value="2" />
</p>
<p>
<div id="slider"></div>
</p>


Код

var sliderValue = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

$(function() {
        $( "#slider" ).slider({
            value:0,
            min: 0,
            max: 37,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val( sliderValue [ ui.value ] );
            }
        });
        $( "#amount" ).val(  sliderValue [ $( "#slider" ).slider( "value" )] );
    });

Автор: Voldemar2004 15.4.2016, 10:05
Решение

Код

var sliderValue =
[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9,
1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9,
2, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9,
3, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9,
4, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8, 4.9,
5, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 5.9,
6, 6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7, 6.8, 6.9,
7, 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 7.9,
8, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8, 8.9,
9, 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8, 9.9,
10, 10, 10, 0, 0, 20, 0, 0, 0, 0, 30, 0, 0, 0,
0, 40, 0, 0, 0, 0, 50, 0, 0, 0, 0, 60, 0, 0, 0,
 0, 70, 0, 0, 0, 0, 80, 0, 0, 0, 0, 90, 0, 0, 0, 0, 100];
 
$(function() {
        $( "#slider" ).slider({
            value:0,
            min: 0,
            max: 146,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val( sliderValue [ ui.value ] );
                if(ui.value > 100) { $( "#slider" ).slider({max: 145, step: 5}) }
                if(ui.value <= 100) { $( "#slider" ).slider({max: 145, step: 1}) }
            }
        });
        $( "#amount" ).val(  sliderValue [ $( "#slider" ).slider( "value" )] );
    });

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)