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();
    }
  
  });
toggle switch style01

toggle switch style01

Timeline style07

Timeline style07

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Scroll down button 01

Scroll down button 01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Input range slider HTML style05

Input range slider HTML style05

Image hover effects style

Image hover effects style

Image hover 07

Image hover 07

Image hover 06

Image hover 06

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

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

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table