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

#javascript #html #jquery #css

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



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

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

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



.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;
}




    

Ответы

Ответ 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;
}


  
  

    

    

    

  







Вариант #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);
}



  

  
  

    

    

    

  







Вариант #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;
}