VPF::Слайдер не симметричный - Форум программистов

Voldemar2004

Дата 14.4.2016, 22:04 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

Репутация: нет
Всего: 23

Сделал слайдер, который меняет значения от 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:09

--------------------

i_i
(';')
(V)

user posted image

Voldemar2004

Дата 14.4.2016, 22:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

Репутация: нет
Всего: 23

Похожая задача

Исходный код

Код


<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" )] );
    });

--------------------

i_i
(';')
(V)

user posted image

Voldemar2004

Дата 15.4.2016, 10:05 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1650
Регистрация: 25.12.2004

Репутация: нет
Всего: 23

Решение

Код


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" )] );
    });

Это сообщение отредактировал(а) Voldemar2004 - 15.4.2016, 10:55

--------------------

i_i
(';')
(V)

user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »