jQuery UI range slider with Knockout bindings

gistfile1.coffee

########################################
##  RangeSlider
#
ko.bindingHandlers.rangeSlider =
  init: (element, valueAccessor, allBindingsAccessor) ->
    options = valueAccessor() || {}
    params = allBindingsAccessor() || {}

    console.log options
    console.log params
    options.change = (e, ui)->
      params.minValue(ui.values[0])
      params.maxValue(ui.values[1])

    options.slide = (e, ui)->
      params.minValue(ui.values[0])
      params.maxValue(ui.values[1])


    $(element).slider options

    ko.utils.domNodeDisposal.addDisposeCallback element, ()->
      $(element).slider "destroy"

  update: (element, valueAccessor, allBindingsAccessor) ->
    params = allBindingsAccessor() || {}
    $(element).slider('option', 'values',[params.minValue(),params.maxValue()])


# HTML sample
# <div data-bind="rangeSlider: {range: true, min:500, max:10000, step:100}, minValue: chosenMinPrice, maxValue: chosenMaxPrice"></div>

#