How to create website sliders using only HTML and CSS?-CodePudding

I want to create a slider for the website, and slider will contain multiple profile which have a person image, Name and description. Using only HTML and CSS is it possible ?

I tried as per the w3school but its not working because I don't want to use JavaScript.

CodePudding user response：

I mean this works for all browsers Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webside Slider</title>
</head>
<body>
  <input type="range" min="0" max="100" step="1" value="50">
</body>
</html>

CSS:

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  margin: 10.8px 0;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0.2px 0.2px 0.2px #000000;
  background: #3071a9;
  border-radius: 5.4px;
  border: 0.2px solid #010101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0.2px 0.2px 0.2px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.2px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0.2px 0.2px 0.2px #000000;
  background: #3071a9;
  border-radius: 5.4px;
  border: 0.2px solid #010101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0.2px 0.2px 0.2px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0.2px #000000;
}
input[type="range"]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2
  }

Hope this help!

CodePudding user response：

I mean this works for all browsers Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webside Slider</title>
</head>
<body>
  <input type="range" min="0" max="100" step="1" value="50">
</body>
</html>

CSS:

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  margin: 10.8px 0;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0.2px 0.2px 0.2px #000000;
  background: #3071a9;
  border-radius: 5.4px;
  border: 0.2px solid #010101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0.2px 0.2px 0.2px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.2px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0.2px 0.2px 0.2px #000000;
  background: #3071a9;
  border-radius: 5.4px;
  border: 0.2px solid #010101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0.2px 0.2px 0.2px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 10.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0.2px #000000;
}
input[type="range"]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2
  }