queryParams refresh model when changing a slider range

Question

Basically I am having a search model which have many criterias. now I am setting up a range sliders to filter price with min and max value as showing in the picture bellow, I want to refresh the model anytime I change the slider values. Any idea how to make it? I copy some pieces of my code:

# route.js.coffee
App.BooksRoute = Ember.Route.extend
  queryParams:
    page:
      refreshModel: true
    min_price:
     refreshModel: true
    max_price:
     refreshModel: true

# template.hbs
<div class="row">
   <div id="price-slider"></div>
</div>
<div class="row">
  <div id="min_price">{{min_price}}</div>
  <div id="max_price" class="right">{{max_price}}</div>
</div>

Thanks,

Answer 1

I finally solved it in creating a separate view for the slider, I put my solution in here maybe helps somebody:

# route.js.coffee
App.BooksRoute = Ember.Route.extend
  queryParams:
    page:
      refreshModel: true
    min_price:
     refreshModel: true
    max_price:
     refreshModel: true

# controller.js.coffee
  queryParams: ['min_price', 'max_price']
  min_price: 0
  max_price: 200

# template.hbs
 <div class="row">
   {{slider-price min_price=min_price max_price=max_price}}
 </div>
 <div class="row">
   <span id="min_price">{{min_price}}</span>
   <span id="max_price" class="right">{{max_price}}</span>
 </div>

 # slider_price_view.coffee.js
 SearchMap.SliderPriceView = Ember.View.extend

 attributeBindings: ['min_price', 'max_price']

 didInsertElement: ->
   self = this
   @$().slider
     range: true
     min: 0
     max: 200
     values: [@get('min_price'), @get('max_price')]

   @$().on 'slide', (event, ui) ->
     $('#min_price').html ui.values[0]
     $('#max_price').html ui.values[1]

   @$().on 'slidestop', (event, ui) ->
     self.set('min_price', ui.values[0])
     self.set('max_price', ui.values[1])

   Ember.Handlebars.helper('slider-price', SearchMap.SliderPriceView) 