Как реализовать такой input[type=range]?

187
10 июля 2017, 18:53

Доброго времени суток. Суть проблемы такова: есть сайт, на котором лежат примеры форм. Прилагаю картинку, на которой видно, как всё должно работать и выглядеть. Вопрос: как это сделать правильно?

Прилагаю выжимку кода.

Также, если это возможно, прошу помощи с построением этой кривой из серого и фиолетового цветов.

Заранее благодарю за помощь.

.range { 
  -webkit-appearance: none; 
  width: 100%; 
  background: transparent; 
} 
 
.range::-webkit-slider-thumb { 
  -webkit-appearance: none; 
} 
 
.range:focus { 
  outline: none; 
} 
 
.range::-ms-track { 
  width: 100%; 
  cursor: pointer; 
  background: transparent; 
  border-color: transparent; 
  color: transparent; 
} 
 
.range::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 2%; 
} 
 
.range::-moz-range-thumb { 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 2%; 
} 
 
.range::-ms-thumb { 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 2%; 
} 
 
.range::-webkit-slider-runnable-track { 
  width: 90%; 
  cursor: pointer; 
  background-image: url(http://mysolaris.xyz/forms/img/gray.png); 
  background-repeat: no-repeat; 
} 
 
.range:focus::-webkit-slider-runnable-track {} 
 
.range::-moz-range-track { 
  width: 90%; 
  cursor: pointer; 
  background-image: url(http://mysolaris.xyz/forms/img/gray.png); 
  background-repeat: no-repeat; 
} 
 
.range::-ms-track { 
  width: 90%; 
  cursor: pointer; 
  background-image: url(http://mysolaris.xyz/forms/img/gray.png); 
  background-repeat: no-repeat; 
}
<input type="range" class="range" min='0' value='0' max='3'>

Answer 1

Вариант #1.

Вместо фона у .scale_overlap нужно "нарезать" картинку, которая будет перекрывать .scale так, чтобы образовать возрастающую шкалу.

$('input.range').on('change mousemove touchmove', function() { 
  $('.scale_fill').width($(this).val() * $('.block').outerWidth() * 0.3333); 
});
* { 
  box-sizing: border-box; 
} 
 
.block { 
  height: 40px; 
  width: 100%; 
  position: relative; 
  padding: 0 0 45px 0; 
} 
 
.scale { 
  width: 100%; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  bottom: 30px; 
  overflow: hidden; 
} 
 
.scale_bg { 
  width: 100%; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: #e7e7e7; 
} 
 
.scale_fill { 
  width: 0; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: #d7b3f4; 
  background: -moz-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: -webkit-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: linear-gradient(to right, #d7b3f4 0%, #555280 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7b3f4', endColorstr='#555280', GradientType=1); 
  transition: width 0.4s; 
} 
 
.scale_overlap { 
  width: 100%; 
  height: 10px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: rgba(255, 255, 255, 0.3); 
} 
 
.range { 
  -webkit-appearance: none; 
  width: 100%; 
  height: 45px; 
  background: transparent; 
  position: absolute; 
  left: 0px; 
  bottom: 0px; 
  z-index: 1; 
} 
 
.range::-webkit-slider-thumb { 
  -webkit-appearance: none; 
} 
 
.range:focus { 
  outline: none; 
} 
 
.range::-ms-track { 
  width: 100%; 
  cursor: pointer; 
  background: transparent; 
  border-color: transparent; 
  color: transparent; 
} 
 
.range::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 16px; 
} 
 
.range::-moz-range-thumb { 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 16px; 
} 
 
.range::-ms-thumb { 
  height: 26px; 
  width: 23px; 
  background-image: url(http://mysolaris.xyz/forms/img/touch.png); 
  background-repeat: no-repeat; 
  cursor: pointer; 
  margin-top: 16px; 
} 
 
.range::-webkit-slider-runnable-track { 
  width: 100%; 
  cursor: pointer; 
  background: none; 
} 
 
.range:focus::-webkit-slider-runnable-track {} 
 
.range::-moz-range-track { 
  width: 100%; 
  cursor: pointer; 
  background: none; 
} 
 
.range::-ms-track { 
  width: 100%; 
  cursor: pointer; 
  background: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <input type="range" class="range" min='0' value='0' max='3'> 
  <div class="scale"> 
    <div class="scale_bg"></div> 
    <div class="scale_fill"></div> 
    <div class="scale_overlap"></div> 
  </div> 
</div>

Вариант #2 на основе jQuery UI Slider.

Вместо фона у .scale_overlap нужно "нарезать" картинку, которая будет перекрывать .scale так, чтобы образовать возрастающую шкалу.

$('.slider').slider({ 
  animate: true, 
  range: 'min', 
  value: 0, 
  min: 0, 
  max: 3, 
  step: 1, 
 
  slide: function(event, ui) { 
    $('input.range').val(ui.value); 
    $('.scale_fill').width(ui.value * $('.block').outerWidth() * 0.3333); 
  }, 
 
  change: function(event, ui) { 
    $('input.range').val(ui.value); 
    $('.scale_fill').width(ui.value * $('.block').outerWidth() * 0.3333); 
  } 
 
});
* { 
  box-sizing: border-box; 
} 
 
.block { 
  height: 40px; 
  width: 100%; 
  position: relative; 
  padding: 0 0 45px 0; 
} 
 
.scale { 
  width: 100%; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  bottom: 30px; 
  overflow: hidden; 
} 
 
.scale_bg { 
  width: 100%; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: #e7e7e7; 
} 
 
.scale_fill { 
  width: 0; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: #d7b3f4; 
  background: -moz-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: -webkit-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: linear-gradient(to right, #d7b3f4 0%, #555280 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7b3f4', endColorstr='#555280', GradientType=1); 
  transition: width 0.4s; 
} 
 
.scale_overlap { 
  width: 100%; 
  height: 10px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  background: rgba(255, 255, 255, 0.3); 
} 
 
 
/*Фон слайдера*/ 
 
.slider { 
  width: 100%; 
  height: 45px; 
  position: absolute; 
  left: 0px; 
  bottom: 0px; 
  z-index: 1; 
  cursor: pointer; 
} 
 
 
/*Стиль кнопки слайдера*/ 
 
.ui-slider-handle { 
  outline: none; 
  width: 23px; 
  height: 26px; 
  position: absolute; 
  top: 16px; 
  margin-left: -11px; 
  z-index: 200; 
  background: url(http://mysolaris.xyz/forms/img/touch.png); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div class="block"> 
  <div class="slider"></div> 
  <input type="hidden" class="range" value="0" /> 
  <div class="scale"> 
    <div class="scale_bg"></div> 
    <div class="scale_fill"></div> 
    <div class="scale_overlap"></div> 
  </div> 
</div>

Вариант #3 на основе jQuery UI Slider.

Без блоков .scale и .scale_* при правильно "нарезанных" серого и градиентного фонов (прописать в соответсвующие классы).

$('.slider').slider({ 
  animate: true, 
  range: 'min', 
  value: 0, 
  min: 0, 
  max: 3, 
  step: 1, 
 
  slide: function(event, ui) { 
    $('input.range').val(ui.value); 
  }, 
 
  change: function(event, ui) { 
    $('input.range').val(ui.value); 
  } 
 
});
* { 
  box-sizing: border-box; 
} 
 
.block { 
  height: 40px; 
  width: 100%; 
  position: relative; 
  padding: 0 0 45px 0; 
} 
 
 
/*Фон слайдера*/ 
 
.slider { 
  width: 100%; 
  height: 15px; 
  position: absolute; 
  left: 0px; 
  bottom: 30px; 
  z-index: 1; 
  cursor: pointer; 
  background: #e7e7e7; // шкала с серым фоном 
} 
 
 
/*Стиль кнопки слайдера*/ 
 
.ui-slider-handle { 
  outline: none; 
  width: 23px; 
  height: 26px; 
  position: absolute; 
  top: 16px; 
  margin-left: -11px; 
  z-index: 200; 
  background: url(http://mysolaris.xyz/forms/img/touch.png); 
} 
 
 
/*Полоска заполнителя слайдера*/ 
 
.ui-widget-header { 
  background: #d7b3f4; // шкала с градиентным фоном 
  background: -moz-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: -webkit-linear-gradient(left, #d7b3f4 0%, #555280 100%); 
  background: linear-gradient(to right, #d7b3f4 0%, #555280 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7b3f4', endColorstr='#555280', GradientType=1); 
  height: 15px; 
  left: 0px; 
  top: 0px; 
  position: absolute; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div class="block"> 
  <div class="slider"></div> 
  <input type="hidden" class="range" value="0" /> 
</div>

READ ALSO
Печать и отправка на почту документа сформированного в скрипте
javascript

Печать и отправка на почту документа сформированного в скрипте

Есть ли возможность отправить на печать и отправить на почту документ сформированный с помощью php или js? Для js использую jszip

 171
Не могу настроить редирект в .htaccess
PHP

Не могу настроить редирект в .htaccess

Надо настроить редирект с страниц старого сайта на новый, но не очполучается

 142
Уведомления с сайта в Telegram
PHP

Уведомления с сайта в Telegram

Есть сайт, созданный без использования движковХочу прикрутить форму обратной связи, чтобы посетитель оставил свой номер и имя в специальной...

 197
Godaddy не отправляет письмо
PHP

Godaddy не отправляет письмо

Добрый день, godaddy не отправляет письма, пробовал на другом хостинге все путем, подскажите пожалуйста в чем может быть проблема? Код отправки...

 205