Awesome 3D Javascript CSS Range Slider

by Posted on

In this post I am going to share Awesome 3D Javascript CSS Range Slider. If you are working on funky website or html game type website then you can use these 3D looking range slider. These are 3 types of slider in the demo 1.Simple Range, 2.Patterned Range, 3.Gradient Range with Indicator. You can use any of then which best suites to your web app.

3D CSS Range Slider

HTML

<h1>Scalable <b>3D</b> Range Sliders</h1>
 
<main class="perspective" id="first-bar">
  <section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
  </section>
  <input class="bar-input" type="range" min="0" max="101" value="64" />
</main>
Simple Range
 
 
<main class="perspective" id="second-bar">
<section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
  </section>
<input class="bar-input" type="range" min="0" max="101" value="37" />
</main>
Patterned Range
 
 
<main class="perspective" id="third-bar">
<section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
     <div class="indicator">89%</div>
  </section>
<input class="bar-input" type="range" min="0" max="100" value="89" />
</main>
<p class="third-bar-p">Gradient Range with Indicator</p>


CSS

/*
Thanks to the following for help:
https://tympanus.net/codrops/2015/09/30/shaded-progress-bars-css-sass-excercise/
*/
@import url("https://fonts.googleapis.com/css?family=Nunito:400,900");
* {
  box-sizing: border-box;
}
 
body,
html {
  font-family: "Nunito", sans-serif;
  background: -webkit-gradient(linear, left bottom, left top, from(#EEEFED), to(#F9E3E9));
  background: linear-gradient(0deg, #EEEFED, #F9E3E9);
  margin: 0;
  padding: 0;
  color: #4D5075;
  font-weight: 300;
  width: 100%;
  height: 100%;
  margin: 0;
}
 
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding: 7vh 15vw 0vh 15vw;
}
 
h1 {
  text-align: center;
  margin: 0 0 10vh 0;
  font-size: 7vh;
  font-weight: 500;
  text-shadow: 0px -15px 70px rgba(77, 80, 117, 0.6);
}
 
h1 b {
  font-weight: 900;
}
 
p {
  text-align: center;
  font-size: 1.3rem;
  text-shadow: 10px 5px 25px rgba(77, 80, 117, 0.6);
  margin-bottom: 8vh;
}
 
.third-bar-p {
  margin-top: 7vh;
}
 
.perspective {
  -webkit-perspective: 70vh;
          perspective: 70vh;
  text-align: center;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.perspective:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
 
.bar-input {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
}
 
#first-bar .bar-input {
  width: 55vh;
}
 
#second-bar .bar-input {
  width: 40vh;
}
 
#third-bar .bar-input {
  width: 42vh;
}
 
.bar {
  display: inline-block;
  position: relative;
  -webkit-transform: rotateX(55deg);
          transform: rotateX(55deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.bar .bar-face {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.bar .bar-face.front {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}
.bar .bar-face.percentage:before {
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  margin: 0;
}
 
#first-bar .bar {
  width: 55vh;
  height: 7vh;
}
#first-bar .bar .bar-face {
  background: rgba(255, 255, 255, 0.5);
}
#first-bar .bar .bar-face.floor {
  box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#first-bar .bar .bar-face.percentage:before {
  box-shadow: 0 1.6em 7em -0.3em rgba(149, 65, 105, 0.5);
}
#first-bar .bar .bar-face.roof {
  -webkit-transform: translateZ(7vh);
          transform: translateZ(7vh);
}
#first-bar .bar .bar-face.back {
  -webkit-transform: rotateX(-90deg) translateZ(-7vh);
          transform: rotateX(-90deg) translateZ(-7vh);
}
#first-bar .bar .bar-face.percentage:before {
  background-color: rgba(149, 65, 105, 0.6);
}
 
#second-bar .bar {
  width: 40vh;
  height: 10vh;
}
#second-bar .bar .bar-face {
  background: rgba(60, 75, 132, 0.5);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(134, 114, 146, 0.5)), to(rgba(60, 75, 132, 0.1))), url("https://zephyo.github.io/22Days/code/5/graphics/stars.svg"), url("https://zephyo.github.io/22Days/code/5/graphics/stars2.svg");
  background-image: linear-gradient(90deg, rgba(134, 114, 146, 0.5), rgba(60, 75, 132, 0.1)), url("https://zephyo.github.io/22Days/code/5/graphics/stars.svg"), url("https://zephyo.github.io/22Days/code/5/graphics/stars2.svg");
  background-repeat: repeat repeat;
}
#second-bar .bar .bar-face.floor {
  box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#second-bar .bar .bar-face.percentage:before {
  box-shadow: 0 1.6em 7em -0.3em rgba(200, 212, 250, 0.5);
}
#second-bar .bar .bar-face.roof {
  -webkit-transform: translateZ(10vh);
          transform: translateZ(10vh);
}
#second-bar .bar .bar-face.back {
  -webkit-transform: rotateX(-90deg) translateZ(-10vh);
          transform: rotateX(-90deg) translateZ(-10vh);
}
#second-bar .bar .bar-face.percentage:before {
  background-image: url("https://zephyo.github.io/22Days/code/5/graphics/sky.png");
  opacity: 0.9;
}
 
#third-bar .bar {
  width: 42vh;
  height: 8vh;
}
#third-bar .bar .bar-face {
  background: rgba(232, 154, 173, 0.7);
}
#third-bar .bar .bar-face.floor {
  box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#third-bar .bar .bar-face.percentage:before {
  box-shadow: 0 1.6em 7em -0.3em rgba(236, 0, 113, 0.5);
}
#third-bar .bar .bar-face.roof {
  -webkit-transform: translateZ(8vh);
          transform: translateZ(8vh);
}
#third-bar .bar .bar-face.back {
  -webkit-transform: rotateX(-90deg) translateZ(-8vh);
          transform: rotateX(-90deg) translateZ(-8vh);
}
#third-bar .bar .bar-face.percentage:before {
  background: -webkit-gradient(linear, left top, right top, from(rgba(245, 239, 200, 0.5)), to(#ec0071));
  background: linear-gradient(90deg, rgba(245, 239, 200, 0.5), #ec0071);
}
#third-bar .bar .indicator {
  box-shadow: 0px 15px 35px rgba(236, 0, 113, 0.3);
  background: #ec0071;
  width: 8vh;
  height: 8vh;
  color: white;
  -webkit-transform: translateY(9.6vh);
          transform: translateY(9.6vh);
  text-align: center;
  font-size: 2.5vh;
  font-weight: 900;
  line-height: 8vh;
}
#third-bar .bar .indicator:before {
  content: "";
  position: absolute;
  background: #ec0071;
  left: 0;
  right: 0;
  margin: auto;
  top: -6px;
  width: 4vh;
  height: 4vh;
  z-index: -1;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}


JS

function initInputs() {
  var allInputs = document.body.querySelectorAll(".bar-input");
 
  for (var i = 0; i < allInputs.length; i++) {
    var input = allInputs[i];
    var barId = input.parentNode.id;
    var styleEl = document.head.appendChild(document.createElement("style"));
 
    if (i == allInputs.length - 1) {
      //set indicator
      var indicator=input.parentNode.querySelector('.bar .indicator');
      setBarIndicator(barId, input, styleEl, indicator);
      input.oninput = setBarIndicator.bind(this, barId, input, styleEl, indicator);
      input.onchange = setBarIndicator.bind(this, barId, input, styleEl, indicator);
    } else {
      setBar(barId, input, styleEl);
      input.oninput = setBar.bind(this, barId, input, styleEl);
      input.onchange = setBar.bind(this, barId, input, styleEl);
    }
  }
}
 
function setBar(barId, input, styleEl) {
  styleEl.innerHTML =
    "#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";
}
 
function setBarIndicator(barId, input, styleEl, indicatorEl) {
  styleEl.innerHTML =
    "#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";
  indicatorEl.style.marginLeft = (input.value - 10) + '%';
  indicatorEl.textContent = input.value + '%';
}
 
initInputs();

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by zephyo. Visit their official repository for more information and follow for future updates.

Published by admin