JSFiddle - React, Tailwind, and code Playground

jQuery UI - Value Slider

by Jennifer Perrin

HTML

<div class="demo">
  <div id="bar">
    <div id="top">
      <div class="background"></div>
    </div>
    <div id="front">
      <div class="background"></div>
    </div>
  </div>
    
  <div id="slider"></div>
</div>

CSS

body { margin-top: 50px; background: #efefef; }

#bar {  
    margin: 20px auto;      
    -webkit-perspective: 200;
    display: block;
    width: 400px;
    -webkit-transform-style: preserve-3d;
}

#front, #top {
    display: block;
    width: 400px;
    height: 10px;
    background: #e9e9e9;
    margin: 0;
    z-index: 0;
}

#top {
    background: #f9f9f9;
    -webkit-transform: rotateX( 70deg );
    -webkit-transform-origin: center bottom;
}

.background {
    height: 10px;
    background: #9cde45;
    width: 50%;
}

#top .background {  }

#front {
    background-image: linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
    background-image: -o-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(228,228,228) 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(204,204,204)), color-stop(1, rgb(228,228,228)));
}

#front {
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.2);
}

#front .background {
    background-image: linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
    background-image: -o-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(74,175,27) 0%, rgb(130,208,47) 100%);

background-image:
    -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(74,175,27)), color-stop(1, rgb(130,208,47)));
}

#slider {
    width: 400px;
    margin: 0 auto;
}

JavaScript

$(function() {
    $("#slider").slider({
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $(".background").width(ui.value + "%");
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));
});