Ползунки и калькуляция

download Скачать range_input_ML_v2.js

Версия скрипта 2.0, последнее обновление: 11.05.2021

Ползунок

Контейнер
  • data-range-item='#id' - помечаем range item #id

  • data-range-min='#min' - минимальное значение (Обязательно)

  • data-range-max='#max' - максимальное значение (Обязательно)

  • data-range-start='#value' - стартовое значение (min по умолчанию)

  • data-range-shift='#value' - шаг (1 по умолчанию)

Ползунок
  • data-range-driven='#id' - помечаем ползунок как ответственный за range item c #id

При использовании ползунка он помечается классом active

Пример

Инициализируем ползунок:

<div class="manipulator" data-range-item="test_6" data-range-min="0" data-range-max="150"> <div class="driven" data-range-driven="test_6"> <span>Двигаюсь</span> </div> </div>
Двигаюсь

Показать CSS

.section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }
Примечание:

Ползунку добавляется соответствующая позиция за счет стиля left, соответственно, он должен иметь позиционирование absolute, а контейнер - relative

Элементы для значений

Зависимый объект
  • data-range-value='#id' (автоопределение input или контейнер)

  • data-range-price='#value' - "стоимость" одного шага (1 по умолчанию)

  • data-range-accuracy='#number' - количество знаков после запятой (точность, 0 по умолчанию)

Модификаторы
  • data-range-value-enter='#id' - Позволяет вводить числа, которые будут влиять на ползунок c #id. Защита ввода пустого, нулевого, большего, меньшего значения и символа, отличного от цифры (использовать только с числами > 0)

  • data-range-format='#format' - форматирование вывода, по умолчанию без формата

  • #space - пробел каждые 3 знака

Пример

Инициализируем ползунок с шагом в 10, установим стартовую позицию как 50, отобразим текущее значение в ползунке. Добавим input с контролем ввода:

<div class="group"> <div class="manipulator" data-range-item="test_7" data-range-min="0" data-range-max="150" data-range-shidt="10" data-range-start="50"> <div class="driven" data-range-driven="test_7"> <p><span data-range-value="test_7"></span> шт.</p> </div> </div> <div class="text"><p>Итого: (24 руб./шт.) <input type="text" data-range-value="test_7" data-range-value-enter='test_7' data-range-price="24"> руб.</p></div> </div>

шт.

Итого: (24 руб./шт.) руб.

Показать CSS

.section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }
Примечание:

Ползунку добавляется соответствующая позиция за счет стиля left, соответственно, он должен иметь позиционирование absolute, а контейнер - relative