How to use a jQuery selection slider in Visualforce.

Click Option 6 here to see how it works. This is how the slider looks like.

Jquery Slider after page loads.JPG

If it is moved the value on the input field changes to the number the user selects.

Jquery Slider after user slides.JPG

To get it to work sliders, start by referencing jQuery plugins on the Visualforce page.

<apex:includeScript value="https://code.jquery.com/jquery-2.1.1.min.js" />

<apex:includeScript value="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js" />

<apex:stylesheet value="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"/>

Style class displays the slider handle & styles the slider.

<style type="text/css">

.ui-slider .ui-slider-handle{

position: absolute;

z-index: 2;

width: 15px;

height: 15.0px;

background: url("https://c.eu2.content.force.com/servlet/servlet.ImageServer?id=015b0000001AuK8&amp;oid=00Db0000000asQ3&amp;lastMod=1412329130000");

border: none;

background-size: 15px 15px; /* Height: auto is to keep aspect ratio */

top: -0.8em;

}

.slider {

width: 700px;

margin-left: 5em;

margin-right: 5em;

font-size: 100%;

margin-top: 0.2em;

color:#08088A;

height:20px;

background: -webkit-linear-gradient(left, #78AB46, 78AB46);

background: -moz-linear-gradient(left, #78AB46, 78AB46);

background: -o-linear-gradient(left, #78AB46, 78AB46);

background: linear-gradient(to right, #78AB46, #78AB46);

border-radius: 6px;

}

.steps {

border: 1px solid transparent; /*follows #slider2 style for sizing purposes */

width: 700px;

position: relative;

height: 20px;

margin-left: 5em;

margin-right: 5em;

}

.tick {

border: 1px solid transparent; /*follows slide handle style for sizing purposes*/

font-size: 9px;

position: absolute;

width: 12.2em;

margin-left: -6em;

text-align:center;

left: 0;

color:#08088A;

}

</style>

Then within form tags, put a pageBlockSection which has all the elements in html.

<apex:pageBlockSection title="On a scale 1-10 how would you rate ***? " columns="1" id="s1" collapsible="false">

<apex:outputPanel id="p1">

<table border="0" style="width:100%">

<tr>

<td style="width:4%"></td>

<td>

<div id="slider-1" class="slider"></div>

<div class="steps" styl2="height:75px;">

<span class="tick" >|<br/>1</span>

<span class="tick" style="left: 12.2%;">|<br/>2</span>

<span class="tick" style="left: 23.3%;">|<br/>3</span>

<span class="tick" style="left: 34.4%;">|<br/>4</span>

<span class="tick" style="left: 45.5%;">|<br/>5</span>

<span class="tick" style="left: 56.6%;">|<br/>6</span>

<span class="tick" style="left: 67.7%;">|<br/>7</span>

<span class="tick" style="left: 78.8%;">|<br/>8</span>

<span class="tick" style="left: 89.9%;">|<br/>9</span>

<span class="tick" style="left: 100%;">|<br/>10</span></div>

</td>

<td><apex:inputfield styleclass="inblockrating" value="{!Client__c.Rating__c}" id="sl1" /> </td>

</tr>

</table>

</apex:outputPanel>

</apex:pageBlockSection>

Put JavaScript at the bottom of the page before </apex:page>

<script type="text/javascript">

$("#slider-1").slider({

range: "min",

min: 1,

max: 10,

step: 1,

value: '{!Client__c.Rating__c}',

slide: function(event, ui){

document.getElementById('{!$Component.qualmatrix:qmForm:block:s1:sl1}').value = ui.value;

}

});

});

</script>

Using sliders instead of standard picklists depending in context can improve user experience.

#jQuery #Visualforce

Featured Posts
Recent Posts
Archive
Search By Tags
No tags yet.
Follow Me
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square