[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
can you please contact me regarding some custom work. danny at nationalrelief dot com (to avoid scrapers spamming me :)
ReplyDeleteThis 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.
ReplyDeleteI 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
DeleteHi,
ReplyDeleteI'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
Hi,
Deleteeasier 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
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
ReplyDeletepython Training institute in Pune
python Training institute in Chennai
python Training institute in Bangalore
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.
ReplyDeleteBest Devops online Training
Online DevOps Certification Course - Gangboard
Best Devops Training institute in Chennai
I would like to thank you for your nicely written post, its informative and your writing style encouraged me to read it till end. Thanks
ReplyDeleteData Science training in rajaji nagar
Data Science with Python training in chennai
Data Science training in electronic city
Data Science training in USA
Data science training in bangalore
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.
ReplyDeletepython training in bangalore
ReplyDeleteEasily, 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.
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.
ReplyDeleteThanks and Regards,
I Digital Academy
I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.
ReplyDeletearttificial intelligence course in thiruvananthapuram
Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.
ReplyDeleteWeb Designing Training in Chennai
Web Designing Course in Chennai
Web Designing Training in Bangalore
Web Designing Course in Bangalore
Web Designing Training in Hyderabad
Web Designing Course in Hyderabad
Web Designing Training in Coimbatore
Web Designing Training
Web Designing Online Training
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
ReplyDeleteJava 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
NICE BLOG...
ReplyDeleteselenium training in chennai
selenium training in chennai
selenium online training in chennai
software testing training in chennai
selenium training in bangalore
selenium training in hyderabad
selenium training in coimbatore
selenium online training
selenium training
ReplyDeleteGreat 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
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.
ReplyDeleteDevOps 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
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.
ReplyDeleteacte chennai
acte complaints
acte reviews
acte trainer complaints
acte trainer reviews
acte velachery reviews complaints
acte tambaram reviews complaints
acte anna nagar reviews complaints
acte porur reviews complaints
acte omr reviews complaints
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.
ReplyDeleteAWS Course in Bangalore
AWS Course in Hyderabad
AWS Course in Coimbatore
AWS Course
AWS Certification Course
AWS Certification Training
AWS Online Training
AWS Training
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.
ReplyDeleteIELTS Coaching in chennai
German Classes in Chennai
GRE Coaching Classes in Chennai
TOEFL Coaching in Chennai
spoken english classes in chennai | Communication training
Excellent content! Thanks for sharing such a useful information.
ReplyDeletePython Training In Bangalore
Python Training Institute In Bangalore
need to thank you for this particularly fantastic article. I definitely really liked every part of it.Educational Institute in Visakhapatnam
ReplyDeletethis is a particularly wonderful helpful asset which you are offering and you find the money for it away for justifiable. I truly like seeing online journal that arrangement the expense of providing an energies valuable asset for pardon. thanks! Download Microsoft Office 2019 Full Crack Keygen
ReplyDeletethis is my most memorable end up antiquated I visit here. I found for that excuse numerous appealing stuff in your weblog explicitly its wind current. From the stores of criticism vis- - vis your articles, I bet I'm not the unmarried-handedly one having all the happiness here shop happening the affable do thanks! Malwarebytes Crack
ReplyDeleteexcellent site, where did u come happening thinking about the notice coarsely this posting? i've habit in some of the articles practically about the request for your site now, and I actually in impersonation of your design. much obliged a million and fascinate continue onward on the working release dependability. thanks! Birthday Wishes For Twins
ReplyDeleteQuickly develop always. Those six stay keep.sports
ReplyDeleteLittle condition news garden woman. Collection set detail pull buy job. Condition natural there focus current.news headlines
ReplyDeleteThis comment has been removed by the author.
ReplyDelete