Slider Control

Slider

Click here to see Slider Demo.

JSControlsTags Slider extends basic sriptaculous slider, to

  • generate automaticly HTML Div for track and handlers slider.
  • synchronize slider with a textbox (input HTML). When handler slide/change, texbox value is updated with slider value. When textBox is updated, slider value is set with textBox value (only if this value is in the range and is numeric).
  • fire AJAX request on slider change event (when slider value has changed).

jscontrols:slider

jscontrols:slider taglib manage slider on client side. Here JSP code of this example :

  <input name="textBoxSliderValue" id="textBoxSliderValue" type="text" >
  <div id="sliderContainer" ></div>
                        
  <jscontrols:slider 
        var="slider"
        source="sliderContainer"
        trackClassName="sliderTrack"
        trackClassName2="sliderTrack2"  
        handlesClassName="sliderHandle" 
        sliderValue="0.4"
        textBox="textBoxSliderValue" />
ParameterDescriptionRequired
varName of the JavaScript object slider created.no
sourceHTML div ID, where slider must be inserted.yes
trackClassNameClass name for DIV track slideryes
trackClassName2Class name for second DIV track slider (when you want manage 2 pictures)no
trackWidthTrack width of slider. This value will be used to set a CSS style="width:trackWidth" for the track div.no
trackHeightTrack height of slider. This value will be used to set a CSS style="height:trackHeight" for the track div.no
handlesClassNameClass name for DIV handle slider. If there are several class name (split with ,), there will be serveral handle.yes
handlesWidthHandle width of slider.no
handlesHeightHandle height of slider.no
axisvalues available are horizontal or vertival.no
rangeRange of slider.no
sliderValueSet value for slider, if defaultValue is a valid double. If there is several handle set an Array with value like this : [0.1,0.4]no
textBoxId of HTML input if slider must be synchronize with slider.no
onChangeEvent fired when slider value is changed.no
onSlideEvent fired while handle is sliding.no

jscontrols-ajax:slider

jscontrols-ajax:slider taglib manage slider on server side. Here JSP code of ajax slider usecase : 

<input name="textBoxSliderValue" id="textBoxSliderValue" type="text">                                                           
<div id="sliderContainer" ></div>
                                                                
<jscontrols-ajax:slider 
        var="ajaxSlider"
        source="sliderContainer"
        baseUrl="${contextPath}/ajaxcalculatorslider.do"
        parameters="operator1={operator1},intervalMax1={intervalMax1},operator2={operator2},intervalMax2={intervalMax2}"
        trackClassName="sliderTrack"
        trackClassName2="sliderTrack2"
        handlesClassName="sliderHandle"
        sliderValue="0.5"
        textBox="textBoxSliderValue"
        sucessFunction="updatePageWithCalculatorResult"
        postFunction="stopWorkInProcess" 
        preFunction="startWorkInProcess"
        errorFunction="ajaxError"  />

In this usecase, the url (baseUrl) server return JSON notation. sucessFunction is the javascript function which get result of server and display it.

ParameterDescriptionRequired
varName of the JavaScript object slider created.no
sourceHTML div ID, where slider must be inserted.yes
trackClassNameClass name for DIV track slideryes
trackClassName2Class name for second DIV track slider (when you want manage 2 pictures)no
trackWidthTrack width of slider. This value will be used to set a CSS style="width:trackWidth" for the track div.no
trackHeightTrack height of slider. This value will be used to set a CSS style="height:trackHeight" for the track div.no
handlesClassNameClass name for DIV handle slider. If there are several class name (split with ,), there will be serveral handle.yes
handlesWidthHandle width of slider.no
handlesHeightHandle height of slider.no
axisvalues available are horizontal or vertival.no
rangeRange of slider.no
sliderValueSet value for slider, if defaultValue is a valid double. If there is several handle set an Array with value like this : [0.1,0.4]no
textBoxId of HTML input if slider must be synchronize with slider.no
onSlideEvent fired while handle is sliding.no
baseUrlURL of server-side action or servlet that processes a simple command.yes
parametersA comma-separated list of parameters to pass to the server-side action or servlet.no
sucessFunctionFunction to execute when AJAX slider action returns JSONArray.yes
postFunctionFunction to execute after Ajax is finished, allowing for a chain of additional functions to execute.no
preFunctionFunction to execute before Ajax is begun. Return false if Slider must not fire Ajax request.no
errorFunctionFunction to execute if there is a server exception (non-200 HTTP response)no

On server side, you can implement BaseSliderAction and return JSON result of your POJO :

if you have a POJO like this : 

  public class MyPOJO {
    private String value;
    public String getValue() {
      return this.value;
    }
  }
  public class AjaxCalculatorSliderAction extends BaseSliderAction {

        public String getJSONContent(ActionMapping mapping, ActionForm form, 
            HttpServletRequest request, HttpServletResponse response) throws Exception {
            String sliderValue = getSliderValue(request);
                if (sliderValue != null) {
                  // Excecute your calcul and prepare POJO to returns
                  MyPOJO myPOJO1 = ...
                  MyPOJO myPOJO2 = ...
                  /**
                   * Return two JSON result
                   */
                  return new JSONBuilder()
                          .addJSONContent(myPOJO1)
                          .addJSONContent(myPOJO2)
                          .toString();
                }
                return null;
        }
  }

if there is no error your callack javascript successFuction will be called : 

function updatePageWithCalculatorResult(JSONArray) {
  var myPOJO1 = JSONArray[0];
  var myPOJO2 = JSONArray[1];
  
  // Display value of POJOs
  alert(myPOJO1.value);
  alert(myPOJO2.value);
}