Vertical Slider Range / Элементы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 890

Количество символов:

Посмотрели: 2607 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Range, сниппет, Bootstrap, element, Responsive, html, элемент, Slider, адаптивные

Поделился: BootstrapТема

Добавлено: 2016-04-12 в 16:11

Метка: 1581149788

⇄ ⇅

</div>
</div>
</div>
 
<script>
var range = document.getElementById('range');

noUiSlider.create(range, {
 start: [ 20, 80 ], // Handle start position
 step: 10, // Slider moves in increments of '10'
 margin: 20, // Handles must be more than '20' apart
 connect: true, // Display a colored bar between the handles
 direction: 'rtl', // Put '0' at the bottom of the slider
 orientation: 'vertical', // Orient the slider vertically
 behaviour: 'tap-drag', // Move handle on tap, bar is draggable
 range: { // Slider can select '0' to '100'
 'min': 0,
 'max': 150
 },
 pips: { // Show a scale with the slider
 mode: 'steps',
 density: 2
 }
});
</script> 
<script>
var valueInput = document.getElementById('value-input'),
 valueSpan = document.getElementById('value-span');
range.noUiSlider.on('update', function( values, handle ) {
 if ( handle ) {
 valueInput.value = values[handle];
 } else {
 valueSpan.innerHTML = values[handle];
 }
});
valueInput.addEventListener('change', function(){
 range.noUiSlider.set([null, this.value]);
});
</script>

BootstrapTema

Vertical Slider Range

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0