Sample range slider

by rosenfeld

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="http://ghusse.github.com/jQRangeSlider/stable/jQRangeSlider.js"></script>
<link rel="stylesheet" href="http://ghusse.github.com/jQRangeSlider/stable/css/iThing.css">
<script src="https://raw.github.com/adamwdraper/Numeral-js/master/numeral.js"></script>
<h1>Transaction value</h1>
<div id="slider"></div>

CSS

#slider { margin: 2.5em 0; }

CoffeeScript

logmin = Math.log(250e6)/Math.log(10)
$("#slider").rangeSlider(
  bounds: {min: logmin, max: 10}
  defaultValues: {min: logmin, max: 10}
  formatter: (val)->
     return 'min' if val is logmin
     return 'max' if val is 10
     val = Math.pow(10, val) unless val is 0
     numeral(val).format('($ 0.0 a)')
)

update = -> $('#slider').rangeSlider 'values', 9.0, 9.5

update()
#setTimeout update, 3