jQuery UI based JavaScript not working in Salesforce

Question

I am trying to develop Range Slider in my VF page but it is not working. I am sharing my code with you.I am trying range slider which will show values on change when slider will move it will show values on that slider.

Thanks in advance!!

<apex:page standardController="Opportunity" sidebar="false">

 <script>
  $(function(){
    $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
        }
    });    
});
 </script>

 <script>
 #demo { padding: 10px !important; }
 </script>

 <div class="demo">
    <div id="slider-vertical">``</div>
</div>

</apex:page>

Answer 1

Looks to me like you haven't included JQuery as a resource?

You can include it as a Static Resource or link to...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

... To call it from Google's CDN.

Thanks!

Edit: Make sure you include that before any other JS.

Edit 2: Try adding the JQuery UI to to the VisualForce page. This should come after the JQuery library itself, but before anything else.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Edit 3 The below code works for me:

<apex:page controller="DanTestController" sidebar="false" showHeader="true">
  <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


  <script>
    $(function(){
      $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
          $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
          var v=$(this).slider('value');
          $(this).find('.ui-slider-handle').text(v);
        }
      });    
    });
  </script>
  <style type="text/css">
    #demo { padding: 10px !important; }
  </style>

The only changes I've made is removing some backticks from the "slider-vertical" div, changed some CSS that you put in Script tags and added the JQuery and Jquery UI from the Google CDN.

Answer 2

You must include the correct libraries. This should do the trick. . .

<apex:page standardController="Opportunity" sidebar="false">

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" /> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>

 <script>
  $(function(){
    $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
        }
    });    
});
 </script>

 <script>
 #demo { padding: 10px !important; }
 </script>

 <div class="demo">
    <div id="slider-vertical">``</div>
</div>

</apex:page>