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