Bootstrap Range Slicer in Oracle APEX

By default Oracle APEX provides many input elements for building forms. Range Slicer isn’t one of them. But still we can include the Range Slicer element from Bootstrap library into our Oracle APEX forms.

A sample of the final output.

To do so, first we need to include Bootstrap libraries in our APEX page. Add the below URLs to the Javascript File URLs and CSS File URLs sections of the APEX Page.

Javascript File URL:

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js

CSS File URL:

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css

Create a Static Region and add the below code to Source portion of the region.

<div class=”col col-12 apex-col-auto”><div class=”t-Form-fieldContainer rel-col lto1627163952595040_0 apex-item-wrapper apex-item-wrapper–text-field ” id=”P2_RANGE_SLICER_CONTAINER”><div class=”t-Form-labelContainer col col-2″><label for=”P2_RANGE_SLICER” id=”P2_RANGE_SLICER_LABEL” class=”t-Form-label”>Range Slicer</label></div><div class=”t-Form-inputContainer col col-3″><div class=”t-Form-itemWrapper”><input type=”range” id=”P2_RANGE_SLICER” name=”P2_RANGE_SLICER” class=”form-range” value=”0″ min=”0″ max=”50″ step=”1″></div></div></div></div>

Note: You can change the label name and item ID according to your need.You can also set min and max values of the slicer. For this example, I have set min value as 0 and max value as 50 with steps of 1 and  item ID as P2_RANGE_SLICER.

Then, create a text item P2_RANGE_SLICER_VALUE in the page and create a Dynamic action to set the value of the text item based on the slicer position.

In the Dynamic Action, choose Event Type as Change, Selection Type as jQuery Selector and jQuery Selector as Range Slicer Item ID. In my case it is #P2_RANGE_SLICER

Create a True Action to Execute Javascript Code and paste the below code in the Code Section and Set Fire on Initialization as True

let slicer_val = $(‘#P2_RANGE_SLICER’).val();

apex.item( “P2_RANGE_SLICER_VALUE” ).setValue( slicer_val );

Save and Run the Page.

Please feel free to reach Cittabase for more information. Thanks for checking my blog …Have a nice day !!!!