Ползунок диапазона с ленточкой

Пример:

Purple

Orange

Green

Blue

HTML:

<label class="slider-container">
	<span>Blue</span>
	<input class="slider" id="range-slider" type="range" min="1" step="0.1" max="100" value="30">
</label>

</label>

CSS:

.slider-container {
	margin: 0 0 80px;
	display: block;
	position: relative;
}	
.slider-container canvas { 
	position: absolute;
	z-index: 10;
}
.slider-container span {
	font-weight: bold;
	color: #337AB7;
	font-size: 16px;
	text-transform: uppercase;
	display: inline-block;
	padding: 10px 0;
}
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	border-radius: 5px;
	outline: none;
	margin: 0;
	background: #6fa6d7; 
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: #337AB7;
}
.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: #337AB7;
    border: none;
}

.slider-container {

margin: 0 0 80px;

display: block;

position: relative;

}

.slider-container canvas {

position: absolute;

z-index: 10;

}

.slider-container span {

font-weight: bold;

color: #337AB7;

font-size: 16px;

text-transform: uppercase;

display: inline-block;

padding: 10px 0;

}

.slider {

-webkit-appearance: none;

width: 100%;

height: 10px;

border-radius: 5px;

outline: none;

margin: 0;

background: #6fa6d7;

}

.slider::-webkit-slider-thumb {

-webkit-appearance: none;

width: 20px;

height: 20px;

border-radius: 50%;

cursor: pointer;

background: #337AB7;

}

.slider::-moz-range-thumb {

width: 20px;

height: 20px;

border-radius: 50%;

cursor: pointer;

background: #337AB7;

border: none;

}

JS:

Подключаем библиотеку Verly.js

Подключаем скрипт ползунка диапазона VerlyRange.js

Инициируем к нужному ползунку по ID указав цвет:

window.onload = function () {
	VerlyRange('range-slider', '#337AB7');
}

window.onload = function () {

VerlyRange('range-slider', '#337AB7');

}

Verly Range Slider на github, библиотека Verly на github

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: