jQuery Slider For Visualforce Pages

[Update:Added Live Demo Link And Unmanaged package Link]

Talking about the Visualforce component , It has all the component that can make a decent UI but its only limited to the word "DECENT", you can create very rich UI using visualforce.What if  a simple slider needs to be implemented in a Visualforce page? Alas! there are no such component in the standard Visualforce Library.

Well you can create one for yourself using jQuery Library. Talking about jQuery its very stable javascript library with lots of feature! It Readily mixes with visualforce to create very rich UI.

So lets have look on the code to create a simple slider using jQuery.

Visualforce Page

<apex:page controller="jqSlider_Con">  
      <!--Inculding the required jQuery Files and CSS--->  
      <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/>  
      <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>  
      <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>  
      <script>  
        $j = jQuery.noConflict();   
        //this function will be called as soon as page load is complete  
        $j(function(){  
          //calling the createSlider Method to create the slider in designated location  
          createSlider('slider','disp','idInputHidden',0,0,1000);  
       });  
        /*  ----------------------------  
        *  Method to create the Slider  
        *  ----------------------------  
        *  PARAMETERS : "destination" = The Id of the div where the slider needs to be created  
        *         "dispOutput" = The Id of the div where the slider value needs to be displayed  
        *         "idInputHidden" = The Id of the apex inputHidden component  
        *         "startVal" = initial position of slider  
        *         "minVal", "maxVal" = minimum and maximum value of slider  
        **/  
         function createSlider(destination,dispOutput,idInputHidden,startVal,minVal,maxVal){  
           $j("#"+destination).slider({   
             range: false,   
             min: minVal,  
             max: maxVal,  
             values: [startVal],  
             slide: function(event, ui){   
             //This function executes every time slider is moved and applies the slider values   
             //to the input fields as well as the output below the slider  
               $j("[id$="+idInputHidden+"]").val(ui.values[0]);  
               $j("#"+dispOutput).html('$' + ui.values[0]);  
             }  
           });  
           //write the initial value in the display div  
           $j("#"+dispOutput).html('$' + startVal);  
         }   
     </script>  
     <apex:form >  
       <apex:pageBlock title="jQuery Slider">  
         <!--Slider will be created Here-->  
         <div id="slider"/><br/>  
         <!--Slider Output here-->  
         <div id="disp"/>  
         <apex:inputHidden value="{!sSliderField}" id="idInputHidden"/>  
         <apex:pageBlockButtons >  
           <apex:commandButton value="Submit" action="{!checkSliderVal}" reRender="idInputHidden"/>  
         </apex:pageBlockButtons>  
       </apex:pageBlock>  
     </apex:form>  
  </apex:page>  

Controller Class

 public class jqSlider_Con {  
     public String sSliderField { get; set; }  
     public void checkSliderVal(){  
       System.debug('###-------------+'+sSliderField );  
     }  
  }  


About the method "createSlider": In this example I have created a function "createSlider". Which takes in the id of div where the slider neds to be rendered, the id of div where the the values should be displayed, the id of the apex inputHidden(so that values can be passed to controller), the initial value of the slider and range of the slider(max and minimum value).This method can be called multiple times for creating slider in different location of page.




Passing Values to Controller: The values are passed to controller using apex inputHiddent element which assigns the value to a public variable. You can check the communication by clicking the submit button, the value of the slider will assigned to the sSliderField and can be seen in debug logs.


Demo

You can check the live demo by going to 
http://blogforce9dev-developer-edition.ap1.force.com/jQSlider


Package For Installation

Install the demo in your developer Org by using this url : 
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000LxdC


5 comments:

  1. can you please contact me regarding some custom work. danny at nationalrelief dot com (to avoid scrapers spamming me :)

    ReplyDelete
  2. This is fantastic, thank you for publishing it. Do you have the @test class needed to move this to production, or do you have any tips on how to create the class for a novice developer? Thank you.

    ReplyDelete
    Replies
    1. I dont think you will need a test class to just move the slider. There is almost nothing on the controller side and everything is handled in JS

      Delete
  3. Hi,

    I'm actually new at this jquery staff and I'm trying your example which is great.
    I'd like to extend the functionality and have the value of the slider saved in a field, and this works fine.

    Although whenever I go to the EDIT page the start value of the slider is 0 (zero), while I'd like to eventually pick-up the existing value of the field. here's the class :


    public class jqSlider_Con {

    Bonds_com_API__c d;
    public decimal sSliderField { get; set; }

    public jqSlider_Con(ApexPages.StandardController controller){
    d = [SELECT Id, eTOMS_API__c,prova__c FROM Bonds_com_API__c WHERE Id=:controller.getRecord().Id Limit 1];
    SsliderField = math.abs(d.prova__c);
    }

    public PageReference onsave(){
    d.prova__c=SsliderField;
    update d;

    return (new ApexPages.StandardController(d)).view();
    }

    If I try and replace the '0' value or the startVal with the variable sSliderField, the slider just does not render.

    Any help/suggestion ?

    thanks,
    Alex

    ReplyDelete
    Replies
    1. Hi,
      easier than I thought, just need setting the value when initializing the slider in the jscript:

      $j("#provaSlider").slider({
      min: 0,
      max: 100,
      slide: function(event, ui) {
      $j("#provaSlider").next().val(ui.value);
      },
      step: 5,
      value: {!IF(ISNULL(BondsAPI__c.prova__c),0,BondsAPI__c.prova__c)} // Read value from field when record is edited
      }
      });

      Regards,
      Alex

      Delete