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();
    }
  
  });
login page green one

login page green one

Vidéo background en html5 style02

Vidéo background en html5 style02

Table Responsive with css 01

Table Responsive with css 01

Pie Charts

Pie Charts

Manual Slideshow

Manual Slideshow

Input range slider HTML style05

Input range slider HTML style05

Form login 02

Form login 02

Dropdown right aligned B4

Dropdown right aligned B4

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Cards box with title

Cards box with title

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu