Binding kendo UI rangeSlider with other controls

Question

I am trying to bind a range slider with two text input controls. Ideally, I want change in either range slider, text input or viewModel property to update all these controls visually and in sync. But here is my observation.

1. Changing range slider values by dragging the thumb, updates the viewModel and input text control values
2. Editing the text in input field in UI updates the viewModel but the rangeSlider is not updated.
3. Changing the range property in console eg. viewModel.range[0]=-10, does not update the text input value or range slider.
4. Changing the range slider value programmatically(slider.value([-7. 10])) does not update viewModel or input text.

Here is the code:

Javascript

 <script type="text/javascript">
 var viewModel  = kendo.observable({
    range: [-7, 3]
 });
 $(document).ready(function() {
      var slider = $("#slider").kendoRangeSlider({
            min: -10,
            max: 10
        });

        kendo.bind($(".QFContent"), viewModel);
});
</script>

HTML

<div class='QFContent'>
    <div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
    <div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
       <span class='readoutText tab-ctrl-formatted-fixedsize'></span>
    <input data-bind="value: range[0]" data-value-update="keyup" type='text'></input>
 </div>
 <div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input>
 </div>
  <div id="slider" class='QFSlider QFBar' data-bind="value : range">
  <input></input>
  <input></input>
</div>
</div>

Answer 1

You have to do a bit more work with updating the range as I don't think binding the value to an array[0]/[1] will actually update it.

You will need to call a function that will update the range values when the input box changes. I went ahead and used kendo numerictextboxes, but a regular input box works just as well.

http://jsbin.com/eBOJeceN/2/edit

-- Edit, small bug in that sample, "undefined" isn't undefined. Updated jsbin http://jsbin.com/eBOJeceN/4/edit