Input range slider HTML style02

<!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">
		<form class="col-lg-6 col-12 mt-5">
			<div class="form-group">
				<input type="range" min="0" max="100" value="0" class="myRange" id="myRange" onchange="updateTextInput(this.value);">
                <input type="number" id="textInput" class="form-control" value="0">
			</div>
		</form>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<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;
} 
input[type=range] {
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: blue;
    border-radius: 25px;
    border: 0px solid #000101;
  }
  input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 39px;
    border-radius: 7px;
    background: #CCC;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3.6px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: blue;
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #ac51b5;
    border-radius: 25px;
    border: 0px solid #000101;
  }
  input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 39px;
    border-radius: 7px;
    background: #65001c;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 39px 0;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #ac51b5;
    border: 0px solid #000101;
    border-radius: 50px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  }
  input[type=range]::-ms-fill-upper {
    background: #ac51b5;
    border: 0px solid #000101;
    border-radius: 50px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  }
  input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 39px;
    border-radius: 7px;
    background: #65001c;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #ac51b5;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #ac51b5;
  }
  
  body {
    padding: 30px;
  }
function updateTextInput(val) {
    document.getElementById('textInput').value=val; 
 }
Arrows Defense Game

Arrows Defense Game

Background div gradient

Background div gradient

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Bootstrap4 datepicker

Bootstrap4 datepicker

Carousel Bootstrap3

Carousel Bootstrap3

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Image hover 03

Image hover 03

Image hover 04

Image hover 04

Image hover 07

Image hover 07

Manual Slideshow

Manual Slideshow

Page 404 exemple 01

Page 404 exemple 01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css