JqueryUI slider - Diablo3 style

In this example below you will see how to do a JqueryUI slider - Diablo3 style with some HTML / CSS and Javascript

Range slider "jqueryui-slider" with diablo3 style applied

Thumbnail
This awesome code was written by cromartie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cromartie ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JqueryUI slider - Diablo3 style</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <br/>
      <h1>JqueryUI slider with diablo 3 style</h1>
    </div>
    <div class="col-md-12">
      <br/>
      <label for="amount" class="slider-label">Ambient volume :</label>
      
      <div id="ambient-volume-slider" data-value="80"></div>
      <input id="ambient-volume" class="volume-slider" type="text" readonly value="80">
    </div>
    <div class="col-md-12">
      <br/>
      <label for="amount" class="slider-label">Effects volume :</label>
      <div id="effects-volume-slider" data-value="60"></div>
      <input id="effects-volume" class="volume-slider" type="text" readonly value="60">
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/cromartie/jqueryui-slider-diablo3-style-vevjro */
input {
  border: 0;
  color: #b9a078;
  font-weight: bold;
}

.ui-state-default, .ui-widget-content .ui-state-default {
  background: url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/ScrollButton.png");
  border-radius: 0;
  background-position: left top;
  width: 25px;
  height: 35px;
  top: -13px;
  border: none;
}

.ui-state-default.ui-state-focus {
  outline: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover {
  background-position: left center;
}

.ui-state-active, .ui-widget-content .ui-state-active {
  background-position: left bottom;
}

.ui-widget.ui-widget-content {
  border: none;
  width: calc(100% - 65px);
  float: left;
  border-radius: 0;
  border-style: solid;
  height: 20px;
  border-width: 5px 4px 5px 4px;
  -moz-border-image: url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/SliderBar.png") 5 4 5 4 fill stretch repeat;
  -webkit-border-image: url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/SliderBar.png") 5 4 5 4 fill stretch repeat;
  -o-border-image: url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/SliderBar.png") 5 4 5 4 fill stretch repeat;
  border-image: url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/SliderBar.png") 5 4 5 4 fill stretch repeat;
}

.ui-slider .ui-slider-range {
  border-radius: 0;
}

.ui-widget-header {
  background: #f1793c;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #f1793c 0%, #cb5e26 50%, #792f14 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #f1793c 0%, #cb5e26 50%, #792f14 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #f1793c 0%, #cb5e26 50%, #792f14 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1793c", endColorstr="#792f14", GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.slider-label {
  color: #b9a078;
  margin-bottom: 10px;
}

.volume-slider {
  color: black;
  display: inline-block;
  padding-left: 25px;
  font-size: 22px;
  margin-top: -5px;
  float: left;
  width: 50px;
}


/*Downloaded from https://www.codeseek.co/cromartie/jqueryui-slider-diablo3-style-vevjro */
$( function() {
    $( "#ambient-volume-slider, #effects-volume-slider" ).slider({
      orientation: "horizontal",
      range: "min",
      min: 0,
      value : 80,
      max: 100,
      step: 5,
      slide: function( event, ui ) {
        $( "#" +(event.target.id).replace("-slider","") ).val(  ui.value );
      }
    });
  
 $( "#ambient-volume-slider" ).slider( "value", 80 );
 $( "#effects-volume-slider" ).slider( "value", 60 );
  
  } );

Comments