Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div id="rangeSlider" data-role="rangeslider" data-min="-10" data-max="10" data-bind="value: val, events:{change: onChange}"  >
      <input />
      <input />
    </div>
    <br />
    <br />
    <input data-role="numerictextbox" data-min="-10" data-max="10" data-bind="value: start, events:{change: onChange, spin: onChange }" />
    <br />
    <input data-role="numerictextbox" data-min="-10" data-max="10" data-bind="value: end, events:{change: onChange, spin: onChange }" />
  </body>
</html>
 
var viewModel = kendo.observable({
  start:-10,
  end:10,
  val:function(){
    return [this.get("start"),this.get("end")];
  },
  onChange:function(e){
    if(e.values==="undefined"){
      viewModel.set("val",[viewModel.get("start"),viewModel.get("end")]);
      $("#rangeSlider").data("kendoRangeSlider").refresh();
    }
    else{
      var values = e.values;
      this.set("start",values[0]);
      this.set("end",values[1]);
    }
  }
});
kendo.bind($(document.body), viewModel);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
giltnerj0pro
0viewers