LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Not So Gooey
Gooey
CSS
body {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #225378;
  overflow: hidden;
}

.wrapper {
  margin: auto;
}

.slider, .slidervertical {
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
  z-index: 100;
}

/* slidershell exists only
to provide a positioning context for the range input and other elements.*/
.label {
  vertical-align: middle;
  display: inline-block;
  color: white;
  text-transform: uppercase;
  font-family: "Montserrat";
  letter-spacing: .02em;
}
.label.fun {
  color: #EB7F00;
}
.label.not-fun {
  color: #ACF0F2;
}

.slidershell {
  margin: 0 20px;
  vertical-align: middle;
  display: inline-block;
  border: 0 none;
  position: relative;
  left: 0px;
  top: 0px;
  overflow: visible;
  -webkit-filter: url(#goo);
          filter: url(#goo);
}

/* .slidertrack is the visible track on which the user drags the thumb button. */
.slidertrack {
  border-radius: 4px;
  position: absolute;
  background: #61c2ca;
}

/* .sliderfill adds color (or a gradient as seen here) to the track as the user 
    drags the thumb. */
.sliderfill {
  position: absolute;
  pointer-events: none;
  background: #EB7F00;
  border-radius: 4px;
}

/* .sliderthumb can be any css you like including an image. 
    The dimensions must match those found in the rule for 
    input[type=range]::-webkit-slider-thumb. */
.sliderthumb {
  width: 30px;
  height: 30px;
  display: block;
  background: white;
  border-radius: 50%;
  background-position: 0px 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  border: 0 none;
  padding: 0px;
  margin: 0px;
  text-align: center;
  pointer-events: none;
}

/* .slidervalue can be styled as you see fit */
input[type=range] {
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0px;
  padding: 0px;
  border: 0 none;
  background: transparent;
  color: transparent;
  overflow: visible;
}
input[type=range]:focus {
  outline: none;
}

/* Make the thumbs the same size as your custom sliderthumb. 
    they will not be visible but they will be draggable.    */
input[type=range]::-webkit-slider-thumb {
  width: 40px;
  height: 40px;
  border-radius: 0px;
  border: 0 none;
  background: transparent;
  -webkit-appearance: none;
}

svg {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width: 610px) {
  .label {
    display: none;
  }

  .slidershell {
    margin: 0;
  }
}
JS
function showValue(val,slidernum) {
    /* setup variables for the elements of our slider */
    var thumb = document.getElementById("sliderthumb" + slidernum);
    var shell = document.getElementById("slidershell" + slidernum);
    var track = document.getElementById("slidertrack" + slidernum);
    var fill = document.getElementById("sliderfill" + slidernum);
    var slider = document.getElementById("slider" + slidernum);
    var pc = val/(slider.max - slider.min); /* the percentage slider value */
    var thumbsize = 30; /* must match the thumb size in your css */
    var bigval = 350; /* widest or tallest value depending on orientation */
    var smallval = 30; /* narrowest or shortest value depending on orientation */
    var tracksize = bigval - thumbsize;
    var fillsize = 12;
    var filloffset = 7;
    var bordersize = 2;
    var loc = pc * tracksize;
  
    document.getElementById("blur").setAttribute("stdDeviation", val/10);
    thumb.style.top =   "0px";
    thumb.style.left =  loc + "px";
    fill.style.top =  filloffset + bordersize + "px";
    fill.style.left =  "0px";
    fill.style.width =  loc + (thumbsize/2) + "px";
    fill.style.height =   fillsize + "px";
    shell.style.height =   smallval + "px";
    shell.style.width =  bigval + "px";
    track.style.height =   fillsize + "px"; /* adjust for border */
    track.style.width =  bigval - 4 + "px"; /* adjust for border */
    track.style.left =  "0px";
    track.style.top = filloffset + bordersize + "px";
}
/* we often need a function to set the slider values on page load */
function setValue(val,num) {
    document.getElementById("slider"+num).value = val;
    showValue(val,num);
}

setValue(50,1);
Host Instantly Drag and Drop Website Builder

 

Description

Tons of code taken from this article. Probs only really works in Chrome, didn't feel like dealing with cross browser stuff.
Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID