jQuery UI Slider + Bootstrap / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.3 Kb

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

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

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

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

Прикреплён файл №2: /stuff/0-0-0-4410-20

Скачали бесплатно: 28 раз

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

Рейтинг: 2.5 / 5 - 8 голосов

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

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

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

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

Теги: элемент, element, слайдер с ползунками, Bootstrap, jQuery UI Slider, сниппет, Snippet

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

Добавлено: 2021-03-16 в 10:45

Метка: 1615881259

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/jquery-ui/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2015/jquery-ui/jquery-ui.js"></script>

<div class="container">

<div class="row">

<div class="col-md-6">

<h3 class="text-center">Стандартное использование слайдера</h3>

<div class="ui-slider1"></div>

<input type="text" id="demo1" value="" class="form-control mt-3">

<script>
$(function(){
 $('.ui-slider1').slider({
 min: 0,
 max: 100,
 value: 0,
 slide: function(event, ui){
 $('#demo1').val(ui.value);
 }
 });
});
</script>

</div>

<div class="col-md-6">

<h3 class="text-center">Установка от минимального значения</h3>

<div class="ui-slider2"></div>

<input type="text" id="demo2" value="" class="form-control mt-3">

<script>
$(function(){
 $('.ui-slider2').slider({
 range: 'min',
 min: 0,
 max: 100,
 value: 28,
 slide: function(event, ui){
 $('#demo2').val(ui.value);
 }
 });
});
</script>

</div>

</div>

<div class="row">

<div class="col-md-6">

<h3 class="text-center">Установка от максимального значения</h3>

<div class="ui-slider3"></div>

<input type="text" id="demo3" value="" class="form-control mt-3">

<script>
$(function(){
 $('.ui-slider3').slider({
 range: 'max',
 min: 0,
 max: 100,
 value: 68,
 slide: function(event, ui){
 $('#demo3').val(ui.value);
 }
 });
});
</script>

</div>

<div class="col-md-6">

<h3 class="text-center">Получение выбранного значения</h3>

<div class="ui-slider4"></div>

<input type="button" id="btn-demo" class="btn btn-success w-100 mt-3" value="Показать выбранное значение">

<script>
$(function(){
 $(".ui-slider4").slider({
 min: 0,
 max: 100,
 value: 0
 });
 
 $('#btn-demo').click(function(){
 alert('Выбранное значение: ' + $(".ui-slider4").slider("value"));
 }); 
});
</script>

</div>

</div>

<div class="row">

<div class="col-md-6">

<h3 class="text-center">Установка своего значения</h3>

<div class="container">
<div class="row">

<div class="ui-slider5"></div>

<div class="col-6"><input type="text" id="demo5" class="form-control mt-3" placeholder="Введите своё значение"></div>
<div class="col-6"><input type="button" id="btn-demo5" class="btn btn-success w-100 mt-3" value="Установить значение"></div>

</div>
</div>

<script>
$(function(){
 $(".ui-slider5").slider({
 min: 0,
 max: 100,
 value: 0
 });
 
 $('#btn-demo5').click(function(){
 $(".ui-slider5").slider({'value': $('#demo5').val()});
 }); 
});
</script>

</div>

<div class="col-md-6">

<style>
#demo-handle {
 width: 44px;
 height: 28px;
 top: 50%;
 margin-top: -14px;
 text-align: center;
 line-height: 26px;
 outline: none;

}
</style>

<h3 class="text-center">Установка значения в ползунке</h3>

<div class="col-12 mt-4">
<div id="ui-slider6">
 <div id="demo-handle" class="ui-slider-handle"></div>
</div>
</div>

<script>
$(function(){
 var handle = $("#demo-handle");
 $("#ui-slider6").slider({
 create: function() {
 handle.text($(this).slider("value"));
 },
 slide: function(event, ui) {
 handle.text( ui.value );
 }
 });
});
</script>

</div>

</div>

<div class="row">

<div class="col-md-6">

<h3 class="text-center">Установка диапазона шага</h3>

<div class="ui-slider7"></div>

<input type="text" id="demo7" value="" class="form-control mt-3">

<script>
$(function(){
 $('.ui-slider7').slider({
 min: 0,
 max: 100,
 value: 25,
 step: 5,
 slide: function(event, ui){
 $('#demo7').val(ui.value);
 }
 });
});
</script>

</div>

<div class="col-md-6">

<h3 class="text-center">Установка значений шага</h3>

<div class="ui-slider8"></div>

<input type="text" id="demo8" value="" class="form-control mt-3">

<script>
$(function(){
 var prices = [2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987];
 
 $('.ui-slider8').slider({
 min: 0,
 max: prices.length - 1, 
 slide: function(event, ui){
 $('#demo8').val(prices[ui.value]); 
 }
 });
});
</script>

</div>

</div>

<div class="row">

<div class="col-md-12">

<h3 class="text-center">Установка диапазона значений</h3>

<div class="container">
<div class="row">

<div class="ui-slider9"></div>

<div class="col-6"><input type="text" id="min" value="28" class="form-control mt-3"></div>
<div class="col-6"><input type="text" id="max" value="89" class="form-control mt-3"></div>

</div>
</div>

<script>
 $(function(){
 $('.ui-slider9').slider({
 range: true,
 min: 0,
 max: 100,
 values: ['28', '89'],
 slide: function(event, ui) {
 $('#min').val(ui.values[0]);
 $('#max').val(ui.values[1]);
 }
 });
});
</script>

</div>

</div>

</div>