Input range slider HTML style04
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Range Slider | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Custom Range Slider">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
<div class="row">
<div class="aria-widget-slider">
<div class="rail-label min">
0
</div>
<div class="rail" style="width: 300px;">
<img src="circle.png"
title=""
role="slider"
tabindex="0"
class="min thumb"
aria-valuemin="0"
aria-valuenow="100"
aria-valuetext="100"
aria-valuemax="2500"
aria-label="Prix Minimum">
<img src="circle.png"
title=""
role="slider"
tabindex="0"
class="max thumb"
aria-valuemin="0"
aria-valuenow="2500"
aria-valuetext="2500"
aria-valuemax="10000"
aria-label="Prix Maximum">
</div>
<div class="rail-label max">
0
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
* {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
div.aria-widget-slider {
clear: both;
padding-top: 0.5em;
padding-bottom: 1em;
}
div.rail-label {
padding-right: 0.5em;
text-align: right;
float: left;
width: 4em;
position: relative;
top: -0.5em;
}
div.rail-label.max {
padding-left: 0.5em;
text-align: left;
}
div.aria-widget-slider .rail {
background-color: #CCC;
border: 3px solid #CCC;
position: relative;
height: 4px;
border-radius: 10px;
float: left;
}
div.aria-widget-slider img[role="slider"] {
position: absolute;
padding: 0;
margin: 0;
top: -10px;
}
div.aria-widget-slider img[role="slider"].focus,
div.aria-widget-slider img[role="slider"]:hover {
outline-color: rgb(140, 203, 242);
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
}
div.aria-widget-slider .rail.focus {
background-color: #aaa;
}
.aria-widget-slider{
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
// Create Slider that contains value, valuemin, valuemax, and valuenow
var Slider = function (domNode) {
this.domNode = domNode;
this.railDomNode = domNode.parentNode;
this.labelDomNode = false;
this.minDomNode = false;
this.maxDomNode = false;
this.valueNow = 50;
this.railMin = 0;
this.railMax = 100;
this.railWidth = 0;
this.railBorderWidth = 1;
this.thumbWidth = 20;
this.thumbHeight = 24;
this.keyCode = Object.freeze({
'left': 37,
'up': 38,
'right': 39,
'down': 40,
'pageUp': 33,
'pageDown': 34,
'end': 35,
'home': 36
});
};
// Initialize slider
Slider.prototype.init = function () {
if (this.domNode.previousElementSibling) {
this.minDomNode = this.domNode.previousElementSibling;
this.railMin = parseInt((this.minDomNode.getAttribute('aria-valuemin')));
}
else {
this.railMin = parseInt((this.domNode.getAttribute('aria-valuemin')));
};
if (this.domNode.nextElementSibling) {
this.maxDomNode = this.domNode.nextElementSibling;
this.railMax = parseInt((this.maxDomNode.getAttribute('aria-valuemax')));
}
else {
this.railMax = parseInt((this.domNode.getAttribute('aria-valuemax')));
}
this.valueNow = parseInt((this.domNode.getAttribute('aria-valuenow')));
this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2));
if (this.domNode.classList.contains('min')) {
this.labelDomNode = this.domNode.parentElement.previousElementSibling;
}
if (this.domNode.classList.contains('max')) {
this.labelDomNode = this.domNode.parentElement.nextElementSibling;
}
if (this.domNode.tabIndex != 0) {
this.domNode.tabIndex = 0;
}
this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this));
this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this));
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
this.domNode.addEventListener('blur', this.handleBlur.bind(this));
this.moveSliderTo(this.valueNow);
};
Slider.prototype.moveSliderTo = function (value) {
var valueMax = parseInt(this.domNode.getAttribute('aria-valuemax'));
var valueMin = parseInt(this.domNode.getAttribute('aria-valuemin'));
if (value > valueMax) {
value = valueMax;
}
if (value < valueMin) {
value = valueMin;
}
this.valueNow = value;
this.dolValueNow = '' + value;
this.domNode.setAttribute('aria-valuenow', this.valueNow);
this.domNode.setAttribute('aria-valuetext', this.dolValueNow);
if (this.minDomNode) {
this.minDomNode.setAttribute('aria-valuemax', this.valueNow);
}
if (this.maxDomNode) {
this.maxDomNode.setAttribute('aria-valuemin', this.valueNow);
}
var pos = Math.round(((this.valueNow - this.railMin) * (this.railWidth - 2 * (this.thumbWidth - this.railBorderWidth))) / (this.railMax - this.railMin));
if (this.minDomNode) {
this.domNode.style.left = (pos + this.thumbWidth - this.railBorderWidth) + 'px';
}
else {
this.domNode.style.left = (pos - this.railBorderWidth) + 'px';
}
if (this.labelDomNode) {
this.labelDomNode.innerHTML = this.dolValueNow.toString();
}
};
Slider.prototype.handleKeyDown = function (event) {
var flag = false;
switch (event.keyCode) {
case this.keyCode.left:
case this.keyCode.down:
this.moveSliderTo(this.valueNow - 1);
flag = true;
break;
case this.keyCode.right:
case this.keyCode.up:
this.moveSliderTo(this.valueNow + 1);
flag = true;
break;
case this.keyCode.pageDown:
this.moveSliderTo(this.valueNow - 10);
flag = true;
break;
case this.keyCode.pageUp:
this.moveSliderTo(this.valueNow + 10);
flag = true;
break;
case this.keyCode.home:
this.moveSliderTo(this.railMin);
flag = true;
break;
case this.keyCode.end:
this.moveSliderTo(this.railMax);
flag = true;
break;
default:
break;
}
if (flag) {
event.preventDefault();
event.stopPropagation();
}
};
Slider.prototype.handleFocus = function (event) {
this.domNode.classList.add('focus');
this.railDomNode.classList.add('focus');
};
Slider.prototype.handleBlur = function (event) {
this.domNode.classList.remove('focus');
this.railDomNode.classList.remove('focus');
};
Slider.prototype.handleMouseDown = function (event) {
var self = this;
var handleMouseMove = function (event) {
var diffX = event.pageX - self.railDomNode.offsetLeft;
self.valueNow = self.railMin + parseInt(((self.railMax - self.railMin) * diffX) / self.railWidth);
self.moveSliderTo(self.valueNow);
event.preventDefault();
event.stopPropagation();
};
var handleMouseUp = function (event) {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
// bind a mousemove event handler to move pointer
document.addEventListener('mousemove', handleMouseMove);
// bind a mouseup event handler to stop tracking mouse movements
document.addEventListener('mouseup', handleMouseUp);
event.preventDefault();
event.stopPropagation();
// Set focus to the clicked handle
this.domNode.focus();
};
// handleMouseMove has the same functionality as we need for handleMouseClick on the rail
// Slider.prototype.handleClick = function (event) {
// var diffX = event.pageX - this.railDomNode.offsetLeft;
// this.valueNow = parseInt(((this.railMax - this.railMin) * diffX) / this.railWidth);
// this.moveSliderTo(this.valueNow);
// event.preventDefault();
// event.stopPropagation();
// };
// Initialise Sliders on the page
window.addEventListener('load', function () {
var sliders = document.querySelectorAll('[role=slider]');;
for (var i = 0; i < sliders.length; i++) {
var s = new Slider(sliders[i]);
s.init();
}
});