Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Custom UI Slider</title>
</head>
<body>
  <div id="slider"></div>
</body>
</html>
 
body {
  background: black;
}
​
.ui-slider {
   top: 50px;
   height: 3px;
   background: #ccc;
   border: 0;
}
​
.ui-slider-handle {
    width:1.3em !important;
    height: 1.3em !important;
    border-radius: 50% !important;
    background-image: none!important;
    background: #fff!important;
    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);
    left:-.6em;
    top: -.6em!important;
    text-decoration:none;
    text-align:center;
}
​
.ui-slider a:focus { outline:0px solid transparent;}
 
$(function() {
    $( "#slider" ).slider({
      value:100,
      min: 0,
      max: 140000,
      step: 20000,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
koubenecpro
0viewers