Skip to Main Content
Posted on

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">
$(function(){
  $("Px_MY_ITEM_SLIDER").slider({
    range:"max",
    min:1,
    max:100,
    value:$v("Px_MY_ITEM"),
    slide:function(event, ui){
      $s("#Px_MY_ITEM",ui.value)
    }
  })
})
</script>

Comments

  • Mihai Ioachim 2 Jun 2016

    Jari,

    I followed your advice and I installed the plugin (with the help of Paul: http://blog.simplyapex.com/2016/06/debugging-101-case-study.html) 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 www.apex-plugin.com is there ready plugin that you can use on APEX 4.x onward?

    Regards,
    Jari

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