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


53 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
  4. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete
  5. I really like the dear information you offer in your articles. I’m able to bookmark your site and show the kids check out up here generally. Im fairly positive theyre likely to be informed a great deal of new stuff here than anyone
    python Training institute in Pune
    python Training institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  6. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    Best Devops online Training
    Online DevOps Certification Course - Gangboard
    Best Devops Training institute in Chennai

    ReplyDelete
  7. Attend The Python training in bangalore From ExcelR. Practical Python training in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python training in bangalore.
    python training in bangalore

    ReplyDelete

  8. Easily, the article is actually the best topic on this registry related issue. I fit in with your Python classes in pune conclusions and will eagerly look forward to your next updates.

    ReplyDelete
  9. The post is absolutely fantastic! Lots of great information and inspiration both of which we all need! Also like to admire the time and effort you put into your blog. It really helped me in advertising my website, and the results were good. appreciate the work.
    Thanks and Regards,
    I Digital Academy

    ReplyDelete
  10. Attend The Artificial Intelligence courses From ExcelR. Practical Artificial Intelligence courses Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Artificial Intelligence courses.
    ExcelR Artificial Intelligence courses

    ReplyDelete
  11. Thanks for giving me the time to share such nice information. Thanks for sharing.
    Data Science Course

    ReplyDelete
  12. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.


    arttificial intelligence course in thiruvananthapuram

    ReplyDelete
  13. Attend The Artificial Intelligence course From ExcelR. Practical Artificial Intelligence course Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Artificial Intelligence course.
    Artificial Intelligence Course

    ReplyDelete
  14. I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!Nice blog,I understood the topic very clearly,And want to study more like thisJava training in Chennai

    Java Online training in Chennai

    Java Course in Chennai

    Best JAVA Training Institutes in Chennai

    Java training in Bangalore

    Java training in Hyderabad

    Java Training in Coimbatore

    Java Training

    Java Online Training

    ReplyDelete
  15. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
    Correlation vs Covariance
    Simple linear regression
    data science interview questions

    ReplyDelete

  16. Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge


    Azure Training in Chennai

    Azure Training in Bangalore

    Azure Training in Hyderabad

    Azure Training in Pune

    Azure Training | microsoft azure certification | Azure Online Training Course

    Azure Online Training

    ReplyDelete
  17. Your writing style says a lot about who you are and in my opinion I'd have to say you're insightful. This article reflects many of my own thoughts on this subject. You are truly unique.Good content. The explanation of content explained very neat.
    DevOps Training in Chennai

    DevOps Online Training in Chennai

    DevOps Training in Bangalore

    DevOps Training in Hyderabad

    DevOps Training in Coimbatore

    DevOps Training

    DevOps Online Training

    ReplyDelete
  18. Excellent Blog! I would Thanks for sharing this wonderful content.its very useful to us.This is incredible,I feel really happy to have seen your webpage.I gained many unknown information, the way you have clearly explained is really fantastic.keep posting such useful information.
    Data Science Training In Chennai

    Data Science Online Training In Chennai

    Data Science Training In Bangalore

    Data Science Training In Hyderabad

    Data Science Training In Coimbatore

    Data Science Training

    Data Science Online Training

    ReplyDelete
  19. I feel really happy to have seen your webpage.I am feeling grateful to read this.you gave a nice information for us.please updating more stuff content...keep up!!

    Android Training in Chennai

    Android Online Training in Chennai

    Android Training in Bangalore

    Android Training in Hyderabad

    Android Training in Coimbatore

    Android Training

    Android Online Training

    ReplyDelete
  20. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.


    AWS Course in Bangalore

    AWS Course in Hyderabad

    AWS Course in Coimbatore

    AWS Course

    AWS Certification Course

    AWS Certification Training

    AWS Online Training

    AWS Training

    ReplyDelete
  21. Your article is very informative. It's a welcome change from other supposed informational content. Your points are unique and original in my opinion. I agree with many of your points.

    IELTS Coaching in chennai

    German Classes in Chennai

    GRE Coaching Classes in Chennai

    TOEFL Coaching in Chennai

    spoken english classes in chennai | Communication training

    ReplyDelete
  22. Thanks for posting the best information and the blog is very helpful.python course in Bangalore

    ReplyDelete
  23. need to thank you for this particularly fantastic article. I definitely really liked every part of it.Educational Institute in Visakhapatnam

    ReplyDelete
  24. Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made for writing this awesome article.Cyber Security in Visakhapatnam. Cyber Security near me

    ReplyDelete
  25. Great Website I just found it very useful, I just accidentally click the link mentioned on 9xmovies tamilrockers 2022 khatrimaza tamilgun 2022 filmywap and get into your post. It's a very informative blog and the layout also user-friendly. Thanks

    ReplyDelete
  26. Great Website I just found it very useful, I just accidentally click the link mentioned on 9xmovies tamilrockers 2022 khatrimaza tamilgun filmywap and get into your post. It's a very informative blog and the layout also user-friendly. Thanks

    ReplyDelete
  27. This is a great post I saw thanks to sharing. This is really what I wanted to see, I hope they continue to share such a great article in the future.
    data science certification in mangalore

    ReplyDelete