1

Есть два input range (посмотреть можно тут)

$(document).ready(function(){
  $('#range').on('change', function(){
    $('#tmbVal').text($(this).val());
  });
    $('#range2').on('change', function(){
    $('#tmbVal2').text($(this).val());
  });
});
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
/* Полоса range */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #9bbedc;
  border-radius: 50px;
  border: 0px solid #000101;
}
/* Тумблер */
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #7ca5c7;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.6px;
}
/* Фокус на полосу range */
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #7ca5c7;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #000;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <input id="range" type="range" min="0" max="100" step="1" value="0">
      <div id="tmbVal">0</div> 
    </div>
    <div class="col-md-4">
        <input id="range2" type="range" min="0" max="100" step="1" value="0">
        <div id="tmbVal2">0</div> 
    </div>
  </div> 
</div>

Подскажите пожалуйста, как из двух сделать один input range с двумя тумблерами? Заранее всем большое спасибо за помощь!

9
  • 1
    Средствами html - никак. Необходимо использовать javascript. Если требуется простое решение, можете воспользоваться `jqueryui.com/slider/#range
    – Node_pro
    Commented 27 дек. 2017 в 7:38
  • А я про html и не говорил) Требуется объединить два моих input'a в один, но с двумя ползунками)
    – Yuriy
    Commented 27 дек. 2017 в 7:41
  • в метках js не указан ;-). А мой вариант Вам не подходит, ссылка вверху
    – Node_pro
    Commented 27 дек. 2017 в 7:44
  • прошу прощения, метку добавил) Я его пробовал, но возник вопрос:1) вот этот файл я не нашел <link rel="stylesheet" href="/resources/demos/style.css"> где его можно скачать?
    – Yuriy
    Commented 27 дек. 2017 в 7:48
  • конечно, он же реализован с помощью div, span элементов. Там необходимо скачать файл с темой ( на сайте есть), либо можете сами написать стили, либо стащить стиль со страницы демо
    – Node_pro
    Commented 27 дек. 2017 в 7:51

1 ответ 1

1

Необходимо использовать javascript. Если требуется простое решение, можете воспользоваться например |jQuery UI Slider

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.