Make dropdown into jquery slider

Question

I have a few dropdowns created by plugins on wordpress and I am trying to make them into sliders.

I found this page here -- http://jqueryui.com/slider/#hotelrooms

Im trying to adapt the code to my needs --

<script>
 jQuery(function($) {
    var select = $( ".comment-overall_r select" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 5,
      range: "min",
      value: select[ 50 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( ".comment-overall_r select" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
  </script>

Nothing is happening and I keep receiving an error about selectedIndex. The select dropdowns are generated by the plugin so I do not to edit them directly. How can I do this?

Answer 1

why you have added configuration like value: select[ 50 ] . I think the configuration should be like:

 var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
    min: 1,
    max: 6,
    range: "min",
    value: select[ 0 ].selectedIndex + 1,
    slide: function( event, ui ) {
    select[ 0 ].selectedIndex = ui.value - 1;
  }
});