С помощью чего можно сделать дискретный ползунок

@doozy · Регистрация: 20.11.2013

Студворк — интернет-сервис помощи студентам

Добрый вечер! Подскажите, пожалуйста, с помощью чего можно реализовать ползунок подобного вида? Чтобы была возможность выбора только одного из четырех значений (вертикальные отметки), т.е. чтобы не было промежуточных значений, и возможно ли сделать так, чтобы указатель (треугольничек) устанавливался автоматически на ближайшей отметке, если, например, мы до этой самой отметки не довели курсор мыши?

@MVS76 · 04.04.2014, 04:26

Вот посмотрите:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
 <title>DoubleTrackBar</title>
  <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="http://stratero.ru/homm/doubletrackbar/img/style.css" />
   <script type="text/javascript" src="http://stratero.ru/homm/doubletrackbar/DoubleTrackBar.js"></script>
 
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}
function classFilter(r,m,not){
    var tmp = [];
    for (var i = 0; r[i]; i++) {
        var pass = (r[i].className).indexOf(m) >= 0;
        if (not ^ pass)
            tmp.push(r[i]);
    }
    return tmp;
}
</script>
 
</head> 
<body>
 
<div id="container">
    
    от <input type="text" size="4" value="0" id="DoubleTrack_InputMin" />
    до <input type="text" size="4" value="5" id="DoubleTrack_InputMax" />
    
<div id="DoubleTrack" class="DoubleTrackBar">
    <img src="http://stratero.ru/homm/doubletrackbar/img/line-l.gif" alt="" class="start" />
    <img src="http://stratero.ru/homm/doubletrackbar/img/line-r.gif" alt="" class="finish" />
    <div id="DoubleTrack_Tracker" class="Tracker">
        <img src="http://stratero.ru/homm/doubletrackbar/img/track-l.gif" alt='' class="fll dis" />
        <img src="http://stratero.ru/homm/doubletrackbar/img/track-r.gif" alt='' class="flr" />
        <span class="fll text" id="DoubleTrack_LeftText"></span>
        <span class="flr text" id="DoubleTrack_RightText"></span>
    </div>
</div>
    
<script type="text/javascript">
    var DoubleTrackBar = new cDoubleTrackBar('DoubleTrack', 'DoubleTrack_Tracker', {
        OnUpdate: function(){
            $('DoubleTrack_LeftText').innerHTML = this.leadSpaces(this.MinPos);
            $('DoubleTrack_RightText').innerHTML = this.leadSpaces(this.MaxPos);
            $('DoubleTrack_InputMin').value = this.MinPos;
            $('DoubleTrack_InputMax').value = this.MaxPos;
            this.Tracker.style.backgroundPosition = -this.TrackerLeft + 'px center';
            if (this.fix)
                for (var i in this.fix)
                    this.fix[i].style.left = (this.TrackerRight - this.TrackerLeft) + 'px';
        },
        //Disabled: function() {
        //  return this.Left;
        //},
        Min: parseFloat($('DoubleTrack_InputMin').value),
        Max: parseFloat($('DoubleTrack_InputMax').value),
        FingerOffset: 8,
        MinSpace: 1,
        RoundTo: 1,
        Margins: 30,
        FormatNumbers: true,
        AllowedValues: true
    });
    DoubleTrackBar.AutoHairline(6);
    DoubleTrackBar.fix = classFilter(DoubleTrackBar.Tracker.getElementsByTagName('*'), 'flr');
    DoubleTrackBar.Track.style.visibility = 'visible';
</script>
 
</div>
 
</body>
</html>

@MVS76 · 04.11.2016, 10:36

модератор, в дуб головой ночью треснулся?
Сообщению 2.5 года, и тут его вдруг решили отредактировать?

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@doozy 1 / 1 / 0 Регистрация: 20.11.2013 Сообщений: 32

	С помощью чего можно сделать дискретный ползунок 04.04.2014, 01:26. Показов 2047. Ответов 2 Метки нет (Все метки) Добрый вечер! Подскажите, пожалуйста, с помощью чего можно реализовать ползунок подобного вида? Чтобы была возможность выбора только одного из четырех значений (вертикальные отметки), т.е. чтобы не было промежуточных значений, и возможно ли сделать так, чтобы указатель (треугольничек) устанавливался автоматически на ближайшей отметке, если, например, мы до этой самой отметки не довели курсор мыши? Миниатюры 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	04.11.2016, 10:36
	модератор, в дуб головой ночью треснулся? Сообщению 2.5 года, и тут его вдруг решили отредактировать? 1

С помощью чего можно сделать дискретный ползунок

Решение