jquery mobile slider

HTML

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$( document ).on( "mobileinit", function() {
  $.mobile.selectmenu.prototype.options.initSelector = ".mobileSelect";
});

</script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>



</head>
<body>
jQuery Mobile data-* attribute<br/>
<select data-bind="options: ['Yes','No'], value: Partecipating" data-role="slider" ></select>
    <span data-bind="text: Partecipating"></span>
    
<hr/>
Knockout.js custom binding<br/>
<select data-bind="options: ['Yes','No'], value: Partecipating, jqSlider: { mini: true }" ></select>



<script type="text/javascript">

ko.bindingHandlers.jqSlider = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var currentValue = valueAccessor();
        var bindings = allBindingsAccessor();
        if(bindings.options==undefined){
            $(element).slider(currentValue);
        }
        else{
            var called=0;
            bindings.optionsAfterRender = function(option, item){
                called++;
                if(called==2)
                    $(element).slider(currentValue);
            };
        }

    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $( element ).slider( "refresh" );
    }
};


viewModel = {
    Partecipating: ko.observable('Yes'),
    Vote: ko.observable('Yes')
};

ko.applyBindings(viewModel);

</script>
</body>
</html>