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>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
.slider { width: 200px; } /* given an width for now, don't rely on this being set to 200px at all times */
.slider .slider_range { font-size: 0.86em; color: #000; }
.slider .slider_val { overflow: hidden; }
.slider input.slider_input {
  font-size: 0.80em;
  border: 0 none;
  float: left;
  margin: 0;
  width: 40%;
  color: #888;
  font-style: italic;
}
​
.slider {border: 1px solid red;}
​
.slider input.si_2 { float: right; text-align: right; }
​
.the_slider {
  margin: 0.5em 0 0.2em 0;
  padding: 0;
}
.the_slider .slider_track {
  width: 100%;
  position: relative;
  height: 10px;
  background: #fff url(http://imgur.com/cYpY8.gif) 0 0 repeat-x;
}
.the_slider .slide_dis_l { position: absolute; left: 0; height: 10px; background: transparent url(http://imgur.com/PwPkH.gif) repeat-x 0 0; }
.the_slider .slide_dis_r { position: absolute; right: 0; height: 10px; background: transparent url(http://imgur.com/PwPkH.gif) repeat-x 0 0; }
.the_slider .slide_dis_l { left: 0%; width: 0; }
.the_slider .slide_dis_r { right: 0%; width: 0; }
.the_slider .p_l,
.the_slider .p_r { position: absolute; top: -6px; background: transparent url(http://imgur.com/fBn6N.gif) 0 0 no-repeat; height: 18px; width: 12px; }
  .the_slider .p_l { left: 0%; margin-left: -5px; }
  .the_slider .p_r { left: 100%; margin-left:-5px; }
</style>
</head>
<body>
​
<div class="slider">
    <div class="slider_range" id="price_slider_display">100 to 5000</div>
    <div class="the_slider" stepvalue="100" maxvalue="100" minvalue="5000" id="slider_range_slide">
        <div class="slider_track" id="slider_bar">
            <div class="slide_dis_l"></div>
            <div class="slide_dis_r"></div>
            <div class="p_l ui-slider-handle" id="slider_handle_left"></div>
            <div class="p_r ui-slider-handle" id="slider_handle_right"></div>
        </div>
    </div>
    <div class="slider_val">
        <input class="slider_input si_1" type="text" value="100" />
        <input class="slider_input si_2" type="text" value="5000" />
    </div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.2");
</script>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers