Sample range slider

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>Logarithmic slider</h1>
<p>Values: <span id=logslider-values>min - max</span>.</p>
<div class=slider-container>
<div id=logslider></div>
</div>
<h1 class=next>Linear slider</h1>
<p>Values: <span id=linearslider-values>min - max</span>.</p>
<div class=slider-container>
<div id=linearslider></div>
</div>

CSS

.slider-container{padding: 0 3em;}
#logslider, #linearslider { margin: 3em 0; }
h1.next{ margin-top: 3em; }

CoffeeScript

logmin = Math.log(250e6)/Math.log(10)
logf = (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)')

$("#logslider").rangeSlider(
  bounds: {min: logmin, max: 10}
  defaultValues: {min: logmin, max: 10}
  formatter: logf
).on 'userValuesChanged', (_, data)->
  v = (p)-> (_ = data.values[p]) and Math.pow(10, _) or 0
  $('#linearslider').rangeSlider 'values', v('min'), v('max')
  updateValuesLabels(v('min'), v('max'))
  
updateValuesLabels = (min, max)->
  v = (val)-> linf val
  $('#linearslider-values, #logslider-values').text "#{v min} - #{v max}"

linf = (val)->
  return 'min' if val is 250e6
  return 'max' if val is 10e9
  numeral(val).format('($ 0.0 a)')
$("#linearslider").rangeSlider(
  bounds: {min: 250e6, max: 10e9}
  defaultValues: {min: 250e6, max: 10e9}
  formatter: linf
).on 'userValuesChanged', (_, data)->
  v = (p)-> (_ = data.values[p]) and (Math.log(_)/Math.log(10)) or 0
  $('#logslider').rangeSlider 'values', v('min'), v('max')
  updateValuesLabels data.values.min, data.values.max
  #v = (p)-> linf data.values[p]
  #$('#linearslider-values').text "#{v 'min'} - #{v 'max'}"