Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Specialty component example: jQuery slider in a text input

Updated on December 9, 2016

In the following example, there are two inputs – a slider and a number input. The slider is a jQuery slider that you can use to set an amount. You can use a slider to enter a numerical value, for instance to set a price or set an interest rate percentage in a loan calculator. The number input is a text input control that is tied to the same property as the slider. Values set by using the slider are reflected on the input, and values set by using the text input are also reflected on the slider.

The slider created by using specialty components

The JQuery slider that you can create as a specialty component

The slider specialty component also defines parameter values that can be passed in where the component is used.

The slider specialty component parameters

The slider specialty component parameters

To use the slider specialty component in your UI, drop in a section include and set the Section name to the slider that you created. Next, provide parameter values and specify any additional presentation-related configuration. If the property is bound to the control by passing in the value to the Value parameter, the slider is bound to .Amount. In addition, the slider has a minimum value and a maximum value.

The General tab of the section include cell properties


The cell properties Parameters tab of a section include.

The following code snippet is for the slider. Insert this snippet into the HTML Source area on the HTML tab of the section rule.

<%-- Set what the code looks like at design time --%>
<pega:when test="pxRequestor.pyPegaDesignMode= 'true'">Slider Widget</pega:when>
A "Pega-aware" JQuery UI slider control
This control can work in conjunction with a Pega input control, such that when bound to the same property changing the value in the Pega control will update the slider, and vice-versa. --%>
<%--No CSS and JS include for this example as Pega UI comes in with JQuery UI library by default--%>
<%--JS support code--%>
     var getPropHandleBoundToWidget = function(componentId) {
          var entryHandlesObj = window['pzEntryHandles_' + componentId];
          var widgetProp = entryHandlesObj["Value"];
Append the specialty component id as there can be many sliders on the page
<div id='slider_<pega:reference name="param.pzComponentId"/>'></div>
<%--Template - Change as necessary--%>
1. Component ID for an instance of a speciality component can be referenced like <pega:reference name="param.pzComponentId"/>.
   This unique id can be used to generate instance specific markup, CSS and JS.
     * To get data from Clipboard objects on loading the page   
     * @param componentId unique component id to get data
     * @return json object from clipboard properties
     * To store data back to Clipboard objects before submitting the page  
     * @param componentId   unique component id to set data
     * @param json object to submit values to clipboard properties
     * @return void
/* SpecialtyComponent requires div having id speciality_<pega:reference name="param.pzComponentId"/> */
if(document.getElementById("speciality_<pega:reference name="param.pzComponentId"/>")) {
               /* onLoad function will be run on load of the page and can be use to initialize the special control with default values from clipboard properties */
               onLoad : function() {
                    var componentId  = "<pega:reference name="param.pzComponentId"/>";
                    /*  Fetch data for this component from the harness container  */
                    var data = pega.u.d.specialtyComponent.getClipboardData(componentId);
                    /*  Put in code that sets this data onto the component
                        Return if the component is already rendered  */
                   if(document.getElementById("slider_" + componentId).hasChildNodes()) {
                   var textInput = $('[name="' + getPropHandleBoundToWidget(componentId) +'"]');
                   // Initialize the slider
                   $("#slider_" + componentId).slider({
                        range: "min",
                        value: parseInt(data.Value),
                        min: parseInt(data.MinValue),
                        max: parseInt(data.MaxValue),
                        slide: function( event, ui ) {
                    /* Add an on-change event listener to update the widget if data in the text input is updated */
                   textInput.change(function() {
                        $("#slider_" + componentId).slider("value", textInput.val());
          },pega.u.d.getContainerSectionElement("speciality_<pega:reference name="param.pzComponentId"/>"));

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us