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();
    }
  
  });
Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Buttons Styles Inspirations

Buttons Styles Inspirations

Carousel Bootstrap4

Carousel Bootstrap4

Css Page grid layout

Css Page grid layout

Form Création de compte

Form Création de compte

Form Step With B4 Style01

Form Step With B4 Style01

Image hover 02

Image hover 02

Image hover 07

Image hover 07

Lightbox gallery style01

Lightbox gallery style01

Menu aside style01 slide out

Menu aside style01 slide out