jQuery range slider in APEX 3.x

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 also related post in OTN forum.