jQuery slider with stars in APEX 3.x

Here is a solution on how you can create jQuery slider showing stars in APEX 3.x. This works also in APEX 4 and you do not need to 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="display:none"

Item Pre Element Text

<div style="padding:4px 0">
<img id="#CURRENT_ITEM_NAME#_IMG" src="#IMAGE_PREFIX#stars&#CURRENT_ITEM_NAME#..gif" alt="" />
</div>

Item Post Element Text

<div id="#CURRENT_ITEM_NAME#_SLIDER" style="width:200px"></div>
<script type="text/javascript">
$(function(){
 $("##CURRENT_ITEM_NAME#_SLIDER").slider({
  range:"min",
  min:1,
  max:5,
  step:1,
  value:$v("#CURRENT_ITEM_NAME#"),
  slide:function(e,u){
   $s("#CURRENT_ITEM_NAME#",u.value);
   $("##CURRENT_ITEM_NAME#_IMG").attr({"src":"#IMAGE_PREFIX#stars"+u.value+".gif"});
  }
 });
});
</script>

And set item default value to e.g. 1.