Ползунок для сайта с подсказкой

@Motor1 · Регистрация: 01.04.2011

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

Добрый вечер сломал уже голову
Есть ползунок

JavaScript
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
<script>
        $(function() {
 
            //Сохраняем нужные элементы в перменных
            var slider  = $('#slider'),
                tooltip = $('.tooltip');
 
            //Скрываем подсказку в начале
            tooltip.fadeIn('fast');
 
            //Вызываем слайдер
            slider.slider({
                //Конфигурация
                range: "min",
                animate: true,
                min: 1,
                max: 100,
                value: 1,
 
                start: function(event,ui) {
                    tooltip.fadeIn('fast');
                
                },
 
 
                
                //Событие слайдреа
                slide: function(event, ui) { //При пермещении слайдера
 
                    var value  = slider.slider('value'),
                        volume = $('.volume');
 
                    tooltip.css('left', value).text(ui.value);  //Выравниваем подсказку соответственно
 
                    
 
                },
 
                stop: function(event,ui) {
                    tooltip.fadeIn('fast');
                },
            });
 
        });
    </script>

нужно сделать диапазон от 3000 до 30000 с шагом в 1000.
Это я знаю как сделать

JavaScript
1
2
3
min: 3000,
                max: 30000,
                value: 1000,

но проблема в следующем если так сделать то подсказка улетает да 30000 пикселей
Как сделать правильно чтобы и подсказка работала и диапазон был такой?
что-то нужно сделать с этим

JavaScript
1
tooltip.css('left', value).text(ui.value);  //Выравниваем подсказку соответственно

Вот ссылка на мой скрипт
https://yadi.sk/d/FhEINY9FbWS6V

Добавлено через 11 часов 11 минут
У кого есть какие мысли на этот счет?

Donald28 · 17.09.2014, 12:05

у меня получилось так

JavaScript
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
        $(function() {
 
            //Сохраняем нужные элементы в перменных
            var slider  = $('#slider'),
                tooltip = $('.tooltip'),
                minValue = 3000,
                maxValue = 30000;
 
            //Скрываем подсказку в начале
            tooltip.fadeIn('fast');
 
            //Вызываем слайдер
            slider.slider({
                //Конфигурация
                orientation: "horizontal",
                range: "min",
                animate: true,
                min: minValue,
                max: maxValue,
                value: minValue,
 
                start: function(event,ui) {
                    tooltip.fadeIn('fast');
                },
 
                //Событие слайдреа
                slide: function(event, ui) { //При пермещении слайдера
    //              var value  = slider.slider('value'), // не знаю для чего эти переменные
    //              volume = $('.volume');
 
                    scale = slider.outerWidth() / ( maxValue - minValue ); // определяем масштаб
                    leftTip = Math.round( scale * ui.value ) - Math.round( tooltip.outerWidth() / 2 ) + 29; // вычисляем позицию подсказки. 5 - это поправочный коэф. т.к. картинка не ровная
                    tooltip.css('left', leftTip).text(ui.value);  //Выравниваем подсказку соответственно
                },
 
                stop: function(event,ui) {
                    tooltip.fadeIn('fast');
                },
            });
 
        });

@Motor1 · 17.09.2014, 13:14 **[ТС]**

ООО супер все сразу заработала.

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@Motor1 1 / 1 / 2 Регистрация: 01.04.2011 Сообщений: 76
	17.09.2014, 13:14 [ТС]
	ООО супер все сразу заработала. 0