Bind slider max option to observable value

Bind slider max option to observable value

Hello and happy new year: 

I have a problem to bind the max option of my jquery slider to an ko.observable value. 

I´ve got the following error massage maybe you can help me. 


Unable to process binding "slider: function (){return {  min:10,max:max,step:10} }"
Message: cannot call methods on slider prior to initialization; attempted to call method 'max'
This is my code: 

  1. <div data-role="content">

  3.     <div>
  4.         <input data-bind="textinput: max"></input>
  5.     </div>
  6.     <div>
  7.         <span data-bind="text: value1"></span>
  8.     </div>

  10.     <div>
  11.         <label for="Range1Slider">GRP:</label>
  12.         <input type="range" name="Range1Slider" data-bind="slider: {  min: 10, max: max, step: 10 }" />
  13.     </div>


  16. </div>


  19. <script type="text/javascript">

  21.     function ViewModel() {

  23.         ///////////////////////////////////////////////////////////////////////////////////////////
  24.         //KnockoutJS Form Variablen
  25.         //////////////////////////////////////////////////////////////////////////////////////////

  27.         var self = this;

  29.         self.max = ko.observable(200);
  30.         self.value1 = ko.observable(20);
  31.     }
  32.     

  34.      ko.bindingHandlers.slider = {
  35.         init: function (element, valueAccessor, allBindings, ViewModel, bindingContext) {
  36.             var options = ko.unwrap(valueAccessor()),
  37.                 valueObservable = allBindings().value;

  39.             // to your init work for the slider-plugin
  40.             // maybe the following ?
  41.             $(element).slider('max', options.max());

  43.             // logic for element-disposal should be implemented

  45.         },
  46.         update: function (element, valueAccessor, allBindings, ViewModel, bindingContext) {
  47.             var options = ko.unwrap(valueAccessor()),
  48.                 valueObservable = allBindings().value;

  50.             // this will be called if the value-binding changed or the max-observable changed
  51.             // update the max-option
  52.             // maybe the following ?
  53.             $(element).slider('max', options.max());
  54.         }
  55.     }

  57.    ko.applyBindings(ViewModel);
  58. </script>