How to use a jQuery selection slider in Visualforce.
If it is moved the value on the input field changes to the number the user selects.
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&oid=00Db0000000asQ3&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);
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.
