Single Article

jQuery range slider in APEX 3.x

Category APEX and jQuery

Here is how you can create jQuery range sliders in APEX 3.x.
This works also in APEX 4 and you do not need load separately jQuery libraries.

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

Create text field to your page.

  • Item HTML Table Cell Attributes:
    
    style="padding-left:8px"
    
    
  • 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 item default value to e.g. 10:200.

 

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

<script type="text/javascript">
$(function(){
 $("#Px_MY_ITEM_SLIDER").slider({
  range:true,
  min:0,
  max:500,
  values:$v("Px_MY_ITEM").split(":"),
  slide:function(e,u){
   $s("Px_MY_ITEM",u.values.join(":"));
  }
 });
});
</script>

See working example.

See also related post in OTN forum.

Comments

No comments yet on this article.

Global Right Column

Search

Archives

Subscribe in a Reader