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();
    }
  
  });
page scroll progress bar

page scroll progress bar

Tablet style code texte

Tablet style code texte

Loading style book loader

Loading style book loader

Loading Style snake

Loading Style snake

Input file style01

Input file style01

Image hover 06

Image hover 06

Form Step With B4 Style01

Form Step With B4 Style01

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Arrows Defense Game

Arrows Defense Game

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau