Single Article

jQuery slider on APEX 3.x

Category APEX and jQuery

Here is how you can create jQuery sliders on APEX 3.x

Load jQuery and jQuery UI library and css in page template header or page HTML header.

Create text field to your page.
Item HTML Form Element Attributes:

style="border:0;color:#f6931f; font-weight:bold" onkeypress="return false;" onfocus="blur();"


Item Pre Element Text  (replace Px_MY_ITEM with your item name)

<div id="Px_MY_ITEM_SLIDER" style="width:200px"></div>

And set default value to 1


Add to page HTML header (replace Px_MY_ITEM with your item name)

<script type="text/javascript">
    slide:function(event, ui){

See working example.



  • Mihai Ioachim · 2 Jun 2016  


    I followed your advice and I installed the plugin (with the help of Paul: but the slider has a downside: to not separate the line in two intervals, the blue one from your example, which shows how much of the range is used.

    Can you create a plugin for Apex 5 using your technique (so a range slider)?

    That will be awesome, for all of us.

    Thank you.

  • Jari Laine · 1 Jun 2016  

    Hi Mihai Ioachim,

    Have you check is there ready plugin that you can use on APEX 4.x onward?


  • Mihai Ioachim · 31 May 2016  

    Hello Jari,

    How can I implement the slider into APEX 5, the same way as you did for 3.x ?

    Also, I need to put on the slider some text, not numbers, like

    Text1 Text2 Text3


    Thank you.


Global Right Column



Subscribe in a Reader