Скриншот
Плагин jQuery для создания слайдера последовательного списка переключателей radio,  type="radio" тега INPUT с использованием Bootstrap v5 версии + демо работы.
Подробнее
Версия: v0.3.1
Каталог: Плагины Bootstrap
Категория: Улучшение
Для Bootstrap: 3, 4, 5
Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, Angular, WHMCS
Язык: Английский
Вес файла: 44.6 Kb
Уникальный ID: 5427
Посмотрели: 93 раз
Скачать бесплатно
Скачали бесплатно: 2 раз
Прокомментировали: 0 раз
Рейтинг: 5.0 / 5 - 1 голосов
Тип лицензии: CC BY 4.0
Авторство: https://github.com/rubentd/radios-to-slider
Информация: Пользователям
Информация: Правообладателям
Поделился: BootstrapТема
Добавлено: 2022-07-30 в 20:16
Метка: 1659201370
Похожие
    Dropdown Menus Enhancement
    CircleType
    jsTree Bootstrap Theme
    matchHeight.js
    Masked Input
    Hover.css
Архив
Архив материалов которые Вы уже смотрели пока пуст
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2022/radios-slider/radios-to-slider.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2022/radios-slider/jquery.radios-to-slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
<div class="col-sm-12"><h2 class="text-center mt-3 mb-3">radios-to-slider + Bootstrap v5</h2>

<div class="form-check">
 <input id="option1" name="options" type="radio" value="1" class="form-check-input">
 <label for="option1" class="form-check-label">1<br>year</label>

 <input id="option2" name="options" type="radio" value="2" class="form-check-input">
 <label for="option2" class="form-check-label">2 years</label>

 <input id="option3" name="options" type="radio" value="3" class="form-check-input" checked>
 <label for="option3" class="form-check-label">3 years</label>

 <input id="option4" name="options" type="radio" value="4" class="form-check-input">
 <label for="option4" class="form-check-label">4 years</label>

 <input id="option5" name="options" type="radio" value="5" class="form-check-input">
 <label for="option5" class="form-check-label">5+ years</label>
</div>

</div>
</div>
</div>

<script>
 $(document).ready(function(){
 var radios = $(".form-check").radiosToSlider();

 // Disable input
 radios.setDisable();

 // Enable input
 radios.setEnable();

 // Retrieve value
 radios.getValue();
 });
</script>
Всего комментариев: 0
avatar

Посоветуйте этот материал другу отправив ему письмо на E - mail

Написать администрации по поводу этого материала