Please reload

Recent Posts
Featured Posts

How to use a jQuery selection slider in Visualforce.

May 16, 2015

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

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&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.

Please reload

Follow Me
Please reload

Search By Tags
Please reload

Archive
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square

Data Visualization with Chart.JS in Lightning Components

October 3, 2019

1/10
Please reload

Connect

  • White LinkedIn Icon
  • Twitter Clean
  • Salesforce Whizz

© 2020 by Mhlangano Khumalo 

All rights reserved