Input range js

@Makson · Регистрация: 07.07.2011

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

Здравствуйте, пытаюсь сделать форму заказа, понадобился калькулятор в котором используется input range.

HTML5
1
2
3
4
      <button onclick="document.getElementById('range').stepDown(10)"> - </button> 
      <input type="range" id="range" min="0" max="10000" step="10" value="10" name="price" onchange="outputUpdate(value)"> 
      <button onclick="document.getElementById('range').stepUp(10)"> + </button>
      <output name="ugolr" for="range" id=volume>0</output>

JavaScript
1
2
3
4
5
function outputUpdate(vol) {
 
  document.querySelector('#volume').value = vol;
 
}

Появилось несколько проблем, которые не могу исправить

1.Нужно добавить две кнопки - + их я сделал, ползунок перемещается, но в числе

HTML5
1
<output name="ugolr" for="range" id=volume>0</output>

не происходят изменения, там меняется только когда я тяну сам ползунок.

2.Когда тяну ползунок, результат не меняется сразу, а только после того как я перестаю его тянуть, можно сделать так чтобы когда тянул цифры сразу менялись?

3.Правильно ли я понял, что vol это конечный результат того, что у нас получилось и я могу его передавать в ajax?

Спасибо.

@arcmag · 30.03.2017, 18:21

Что то типа такого?

HTML5
1
2
3
4
<input type="button" value="+" id="incRange">
<input type="button" value="-" id="decRange">
<input type="range" value="0" min="0" max="10" id="range">
<div id="rangeValue">0</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var range         = document.getElementById("range"),
    inc           = document.getElementById("incRange"),
    dec           = document.getElementById("decRange"),
    markRagne     = false,
    incF          = function () {range.value = parseInt(range.value) + 1; outRangeValue(); },
    decF          = function () {range.value = parseInt(range.value) - 1; outRangeValue(); },
    rangeUp       = function () {markRagne = false; },
    rangeMove     = function () {if(markRagne) outRangeValue(); },
    rangeDown     = function () {markRagne = true; },
    outRangeValue = function () {
      document.getElementById("rangeValue").innerHTML = range.value;
    };
 
inc.addEventListener("click", incF);
dec.addEventListener("click", decF);
range.addEventListener("change", outRangeValue);
range.addEventListener("mousedown", rangeDown);
range.addEventListener("mousemove", rangeMove);
range.addEventListener("mouseup", rangeUp);

@Zazu · 30.03.2017, 18:31

Сообщение от Makson

ошибка, ковычки где?

@Makson · 30.03.2017, 18:38 **[ТС]**

Сообщение от arcmag

Что то типа такого?

То что нужно, спасибо большое) остался последний вопрос, как из

HTML5
1
<div id="rangeValue">0</div>

передать данные в ajax? можно как то вытащить переменную из вашего кода и работать с ней?

@arcmag · 30.03.2017, 18:42

Сообщение от Makson

передать данные в ajax? можно как то вытащить переменную из вашего кода и работать с ней?

Конечно можно в чем проблема? Фактически в

HTML5
1
<div id="rangeValue">0</div>

всего лишь отображается текущее значение ползунка. Берите значение из переменной

JavaScript
1
range.value

И передавайте куда хотите, в том числе и в ajax

@Makson · 31.03.2017, 15:35 **[ТС]**

Спасибо, очень помогли.

Добавлено через 20 часов 33 минуты
Подскажите пожалуйста ещё такой момент, как сделать расчёт, чтобы при изменении ползунка ещё и считало, вот я тут наколхозил и ничего не работает

JavaScript
1
2
3
4
if(range.value <= 490) { var totaljs = "175"; }
if(range.value >= 500 && range.value <= 990) { var totaljs = "170"; }
if(range.value >= 1000) { var totaljs = "160"; }
document.getElementById("resvalue").innerHTML = totaljs;

HTML5
1
<div id="resvalue">0</div>

@evikza · 31.03.2017, 15:56

Makson,

HTML5
1
2
<input type="range" id="range" min="0" max="10000" step="10" value="0">
<div id="resvalue">0</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
range.oninput = function() {
  if (range.value <= 490) {
    var totaljs = "175";
  }
  if (range.value >= 500 && range.value <= 990) {
    var totaljs = "170";
  }
  if (range.value >= 1000) {
    var totaljs = "160";
  }
  document.getElementById("resvalue").innerHTML = totaljs;
}

Демонстрация

@Makson · 01.04.2017, 17:25 **[ТС]**

Работает, только есть проблема, когда ползунок передвигаешь всё хорошо, а когда на кнопки жмёшь он не считает

Добавлено через 23 часа 38 минут

Сообщение от evikza

range.oninput = function()

Я так понял к этому делу нужно добавить incRange только вот как не пробовал, не получается ничего. Можете подсказать, что добавить чтобы заработали эти кнопки?

HTML5
1
<input style="float:left;" type="button" value="-" id="decRange"><input type="button" value="+" id="incRange">

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

Input range js

Решение

Решение

Решение