Integrating a Slider Control into Oracle APEX

Oracle Application Express (APEX) doesn’t come with a built-in Slider Control widget, but it’s quite easy to integrate one of the existing Javascript libraries like the Tigra Slider Control. See there example page 1 and page 2 for how the sliders can look like. But you can also use your own images for the slider.

What are the steps to integrate it?

  1. Copy the slider.js onto your web server or upload it into Shared Components\Static Files
  2. Upload the images you want to use for the slider onto your web server or into Shared Components\Images. In my case it’s sldr5h_bg.gif and sldr5h_sl.gif
  3. Add the following code into Edit Page Attributes\HTML Header
    <script type="text/javascript" src="#APP_IMAGES#slider.js"></script>

    Note: Replace #APP_IMAGES# if you didn’t upload the files to the Shared components. If you didn’t assign the files to the application, use #WORKSPACE_IMAGES# instead.

  4. Create a text item on your page. For example named P1_VALUE
  5. Set the HTML Form Element Attributes property to
    onchange="A_SLIDERS[0].f_setValue(this.value);"
  6. Set the Pre Element Text property to
    <table><tr><td>
  7. Add the following code
    </td><td>
    <script type="text/javascript">
    (function(){
      var A_Slider = {
        'b_vertical' : false,
        'b_watch': true,
        'n_controlWidth': 149,
        'n_controlHeight': 17,
        'n_sliderWidth': 9,
        'n_sliderHeight': 17,
        'n_pathLeft' : 1,
        'n_pathTop' : 0,
        'n_pathLength' : 138,
        's_imgControl': '#APP_IMAGES#sldr5h_bg.gif',
        's_imgSlider': '#APP_IMAGES#sldr5h_sl.gif',
        'n_zIndex': 1
      }
      var A_SliderInit = {
        's_form' : 0,
        's_name': 'P1_VALUE',
        'n_minValue' : 1,
        'n_maxValue' : 18,
        'n_step' : 1
      }
      new slider(A_SliderInit, A_Slider);
    })();
    </script>
    </td></tr></table>

    into the Post Element Text property and replace the red marked code parts. See the documentation for the different settings.

That’s it, you are already done! It’s now time to run your page to try it out.

See my example slider application for a working example.

Update on 26-Jan-2008: I have changed the original example to use just one field. That’s better, because in the original example which used a second field with the Begin On New Line set to No, it could result in a detached slider if there are other fields which also use Begin On New Line=No. I’m now wrapping a table around both elements (text field and slider) to tight them together.

6 thoughts on “Integrating a Slider Control into Oracle APEX

  1. Very nice example, shows the power of integrating 3rd party js and plugins with APEX which is exactly what we want to happen.

    It’s almost like your practicing for custom item types…………. almost ;)

    Carl

  2. Nice example of a 3rd party integration Patrick.
    There’re so many things you could integrate!

    Dimitri

  3. This is a very nice example.
    Do you have an example on how to integrate the datagrid like the Live group summary that allows cell editing

Comments are closed.