In order to make regular checkboxes to look better we’ve created a slider component which in a very similar way gets a boolean input from the user but looks better.
It looks like this:
We did it by adding a custom component which contains some additional Javascript and Stylesheets from switchery.js and switchery.css libraries.
In order to use this component, this is the Visualforce code you’ll need to add to your page:
<code class="rainbow" data-language="html"><span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:page <span class="support attribute">controller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">SliderExampleController</span><span class="string quote">"</span><span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:form <span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:pageBlock <span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:pageBlockSection <span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentId</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">4</span><span class="string quote">"</span> <span class="support attribute">fieldLabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels}</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">defaultValues</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!defaults}</span><span class="string quote">"</span> <span class="support attribute">sliderSize</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">large</span><span class="string quote">"</span> <span class="support attribute">speed</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0.1s</span><span class="string quote">"</span><span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentId</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxComponent</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">color</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#ff00ff</span><span class="string quote">"</span> <span class="support attribute">disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span><span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentId</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent2</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">4</span><span class="string quote">"</span> <span class="support attribute">fieldLabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels}</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">defaultValues</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!defaults}</span><span class="string quote">"</span> <span class="support attribute">color</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#ffff12</span><span class="string quote">"</span> <span class="support attribute">jackColor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#aa02aa</span><span class="string quote">"</span> <span class="support attribute">jackSecondaryColor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#EEE000</span><span class="string quote">"</span><span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentId</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent3</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">4</span><span class="string quote">"</span> <span class="support attribute">fieldLabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels}</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">color</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#12ff12</span><span class="string quote">"</span> <span class="support attribute">secondaryColor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#ff2fee</span><span class="string quote">"</span> <span class="support attribute">sliderSize</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">small</span><span class="string quote">"</span> <span class="support attribute">speed</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0.9s</span><span class="string quote">"</span><span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:pageBlockSection<span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:pageBlock<span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:form<span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:page<span class="support tag close">></span>
</code>
Now, let’s take a closer look at this component and its parameters.
There are a number of parameters on the component.
Table of parameters:
| Name | Required | Type | Description |
| componentId | Yes | String | The key given to this component so the page can easily get access to it. This key should be unique. |
| apexController | Yes | PageControllerBase | The controller for the page. It should be extended from PageControllerBase virtual class which also included in sources of this component on GitHub |
| size | No | Integer | Number of sliders in this component. Set this if you need more than one slider. Default is 1. |
| fieldLabels | No | String[] | Labels to display near slider |
| defaultValues | No | Boolean[] | Default Values Assigned To Slider |
| color | No | String | Primary color of slider background (when it’s on) in hex starting with the ‘#’ character. Default is light green (#64bd63). |
| secondaryColor | No | String | Secondary color of slider background (when it’s off) in hex starting with the ‘#’ character. Default is grey (#dfdfdf). |
| jackColor | No | String | Primary color of slider jack in hex starting with the ‘#’ character. Default is white (#fff). |
| jackSecondaryColor | No | String | Secondary color of slider jack in hex starting with the ‘#’ character |
| disabled | No | String | Valid values are true and false – set as true only if you need to show disabled slider. Default is false. |
| disabledOpacity | No | String | Opacity of disabled slider – only use when disabled=true. Default is 0.5. |
| speed | No | String | Speed of animation in seconds. Valid format is #.#s, where ‘#’ is a number. You can use 0.0s to disable animation. Default value is 0.4s. |
| sliderSize | No | String | Size of the slider component. Available options are default, small, large |
Now, let’s take a look little behind the VF component to show how it works and walk through the logic behind it.
When you want to create a new component on your page, the values of the parameters “componentId” and “apexController” are set in the ComponentControllerBase class which is extended by SliderComponentController. It allows us to have one common Map of Ids of component controllers and their controllers (which is the property ComponentControllerMap in the PageControllerBase class).
This is convenient because then you have all your Slider components that are used on the page together. Also, we have a few ways to get values back from the custom checkboxes, provided by the component.
One option:
<code class="rainbow" data-language="javascript">((SliderComponentController) <span class="function call">getComponentControllerMap</span>().<span class="function call">get</span>(<span class="string">'inputCheckboxesComponent'</span>)).Results[indexOfCheckbox];</code>
This returns a variable from type InputCheckboxWrapper. This wrapper contains a boolean value of a checkbox and a string label of the checkbox.
You can get the checkbox result like this:
<code class="rainbow" data-language="javascript">((SliderComponentController) <span class="function call">getComponentControllerMap</span>().<span class="function call">get</span>(<span class="string">'inputCheckboxesComponent'</span>)).Results[indexOfCheckbox].Value;</code>
Or get List of all boolean results of the checkboxes by:
<code class="rainbow" data-language="javascript">((SliderComponentController) <span class="function call">getComponentControllerMap</span>().<span class="function call">get</span>(<span class="string">'inputCheckboxesComponent'</span>)). <span class="function call">toBooleanList</span>();</code>
To use this component in your Visualforce page you should extend the PageControllerBase class in your page controller.
<code class="rainbow" data-language="java">public with sharing virtual class PageControllerBase {
private Map<string, componentcontrollerbase=""> ComponentControllerMap;
public virtual Map<string, componentcontrollerbase=""> getComponentControllerMap(){
return componentControllerMap;
}
public virtual void setComponentControllerMap(String key, ComponentControllerBase compController){
if(componentControllerMap == null)
componentControllerMap = new Map<string, componentcontrollerbase="">();
componentControllerMap.put(key,compController);
}
public PageControllerBase getThis() {
return this;
}
}</string,></string,></string,></code>
This class contains only one private property, ComponentControllerMap, which holds all of the controllers of the Slider Components on the page. It will be set up automatically after the first component is created in the ComponentControllerBase class.
More examples:
<code class="rainbow" data-language="html"><span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:pageblocksection <span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentId</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent11</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">2</span><span class="string quote">"</span> <span class="support attribute">fieldlabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels1}</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">color</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#FF7D12</span><span class="string quote">"</span> <span class="support attribute">secondarycolor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#45D0FF</span><span class="string quote">"</span> <span class="support attribute">jackcolor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#E6E4E3</span><span class="string quote">"</span> <span class="support attribute">jacksecondarycolor</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#42403F</span><span class="string quote">"</span> <span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:pageblocksection<span class="support tag close">></span></code>
<code class="rainbow" data-language="html"> <span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentid</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent22</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">fieldlabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels2}</span><span class="string quote">"</span> <span class="support attribute">apexController</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">slidersize</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">small</span><span class="string quote">"</span> <span class="support attribute">speed</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">0.3s</span><span class="string quote">"</span> <span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:pageblocksection<span class="support tag close">></span></code>
<code class="rainbow" data-language="html"><span class="support tag"><span class="support tag"><</span><span class="support tag-name">apex</span></span>:pageblocksection <span class="support tag close">></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag-name">c</span></span>:SliderComponent <span class="support attribute">componentid</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">inputCheckboxesComponent22</span><span class="string quote">"</span> <span class="support attribute">size</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">1</span><span class="string quote">"</span> <span class="support attribute">fieldlabels</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!labels2}</span><span class="string quote">"</span> <span class="support attribute">apexcontroller</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">{!this}</span><span class="string quote">"</span> <span class="support attribute">disabled</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">true</span><span class="string quote">"</span> <span class="support tag close">/></span>
<span class="support tag"><span class="support tag"><</span><span class="support tag special">/</span><span class="support tag-name">apex</span></span>:pageblocksection<span class="support tag close">></span></code>
You can get the code and all of the resources of this slider component on our GitHub.
