Create RadSlider in client side code.

[Henry]

Hi folks,

Is it possible to create a RadSlider control using Javascript?

Thanks
Henry Gibbs

[Princy]

Hi,

It is possible to create a RadSlider using JavaScript. Please have a look into the following sample client side code.

ASPX:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
This slider is declaratively created in the ASPX page
<telerik:RadSlider runat="server" ID="RadSlider1" Value="50">
</telerik:RadSlider>
<br />
<div class="module" style="width: 300px;">
    <a id="ClientSlider" href="javascript:CreateSlider()">Create a new slider using JavaScript</a>
    <div id="elementToExtend">
    </div>
</div>

JavaScript:

<script type="text/javascript">
    function CreateSlider() {
        var sliderProps = {
            value: 50,
            itemData: [],
            _skin: "Default",
            _width: "200px"
        }
        var sliderEvents = {}; // No events
        $get("ClientSlider").style.display = "none"; // hide the button
        var elementToExtend = $get("elementToExtend");
        $create(Telerik.Web.UI.RadSlider, sliderProps, sliderEvents, null, elementToExtend);
    }
</script>

Thanks,
Princy.

[Henry]

Thanks princy. Is it possible to get the skin from another RadSlider in the same page and assign to _skin? I dont want to use default skin.

[Princy]

Hi,

If you have another slider in the same page, then you can set the skin as follows.

JavaScript:

<script type="text/javascript">
    function CreateSlider() {
        var sliderProps = {
            value: 50,
            itemData: [],
            _skin: $find('<%= RadSlider1.ClientID %>').get_skin(),
            _width: "200px"
        }
        var sliderEvents = {}; // No events
        $get("ClientSlider").style.display = "none"; // hide the button
        var elementToExtend = $get("elementToExtend");
        $create(Telerik.Web.UI.RadSlider, sliderProps, sliderEvents, null, elementToExtend);
    }
</script>

Thanks,
Princy.