8

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

введите сюда описание изображения

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

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

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

.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'>

4
  • решение на jquery подойдет?
    – Cheg
    10 июл 2017 в 1:27
  • @Cheg подойдет.
    – Stanislav
    10 июл 2017 в 2:24
  • еще вопрос: этот блок планируется адаптировать или ширина будет фиксирована?
    – Cheg
    10 июл 2017 в 2:29
  • @Cheg он будет адаптирован по ширине для планшетов и мобилок.
    – Stanislav
    10 июл 2017 в 2:32

1 ответ 1

7

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

1
  • 1
    Шикарно! Даже не знал, что при помощи JQ UI можно такое сделать. Спасибо! Буду читать документацию
    – Stanislav
    10 июл 2017 в 3:37

Ваш ответ

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

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