<kendo:slider>

A JSP wrapper for Kendo UI Slider.

Configuration Attributes

decreaseButtonTitle java.lang.String

The title of the decrease button of the Slider.

Example

<kendo:slider decreaseButtonTitle="decreaseButtonTitle">
</kendo:slider>

dragHandleTitle java.lang.String

The title of the drag handle of the Slider.

Example

<kendo:slider dragHandleTitle="dragHandleTitle">
</kendo:slider>

increaseButtonTitle java.lang.String

The title of the increase button of the Slider.

Example

<kendo:slider increaseButtonTitle="increaseButtonTitle">
</kendo:slider>

largeStep float

The delta with which the value will change when the user presses the Page Up or Page Down key (the drag handle must be focused). Note: largeStep will also set a large tick for every large step.Must be a positive number, larger than smallStep.

Example

<kendo:slider largeStep="largeStep">
</kendo:slider>

max float

The maximum value of the Slider.

Example

<kendo:slider max="max">
</kendo:slider>

min float

The minimum value of the Slider.

Example

<kendo:slider min="min">
</kendo:slider>

orientation java.lang.String

The orientation of a Slider: "horizontal" or "vertical".

Example

<kendo:slider orientation="orientation">
</kendo:slider>

showButtons boolean

Can be used to show (true) or hide (false) the increase and decrease buttons of a Slider.

Example

<kendo:slider showButtons="showButtons">
</kendo:slider>

smallStep float

The small step value of the Slider. Must be a positive number, otherwise an Javascript exception will be thrown.The small step value determines the amount of Slider value change when the end user clicks on the increase or decrease buttons of the Slider;; presses the arrow keys (the drag handle must be focused); or drags the drag handle..

Example

<kendo:slider smallStep="smallStep">
</kendo:slider>

tickPlacement java.lang.String

Denotes the location of the tick marks in the Slider. The available options are: topLeft - Tick marks are located on the top of the horizontal widget or on the left of the vertical widget.; bottomRight - Tick marks are located on the bottom of the horizontal widget or on the right side of the vertical widget.; both - Tick marks are located on both sides of the widget. or none - Tick marks are not visible..

Example

<kendo:slider tickPlacement="tickPlacement">
</kendo:slider>

value float

The underlying value of the Slider.

Example

<kendo:slider value="value">
</kendo:slider>

Configuration JSP Tags

kendo:slider-tooltip

Configuration of the Slider tooltip.

More documentation is available at kendo:slider-tooltip.

Example

<kendo:slider>
    <kendo:slider-tooltip></kendo:slider-tooltip>
</kendo:slider>

Event Attributes

change String

Fires when the slider value changes as a result of selecting a new value with the drag handle, buttons or keyboard.

For additional information check the change event documentation.

Example

<kendo:slider change="handle_change">
</kendo:slider>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

slide String

Fires when the user drags the drag handle to a new position.

For additional information check the slide event documentation.

Example

<kendo:slider slide="handle_slide">
</kendo:slider>
<script>
    function handle_slide(e) {
        // Code to handle the slide event.
    }
</script>

Event Tags

kendo:slider-change

Fires when the slider value changes as a result of selecting a new value with the drag handle, buttons or keyboard.

For additional information check the change event documentation.

Example

<kendo:slider>
    <kendo:slider-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:slider-change>
</kendo:slider>

kendo:slider-slide

Fires when the user drags the drag handle to a new position.

For additional information check the slide event documentation.

Example

<kendo:slider>
    <kendo:slider-slide>
        <script>
            function(e) {
                // Code to handle the slide event.
            }
        </script>
    </kendo:slider-slide>
</kendo:slider>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy