This is a migrated thread and some comments may be shown as answers.

Create RadSlider in client side code.

3 Answers 63 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Henry
Top achievements
Rank 1
Henry asked on 18 Apr 2013, 02:24 AM
Hi folks,

Is it possible to create a RadSlider control using Javascript?

Thanks
Henry Gibbs

3 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 18 Apr 2013, 05:18 AM
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.
0
Henry
Top achievements
Rank 1
answered on 19 Apr 2013, 08:02 AM
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.
0
Princy
Top achievements
Rank 2
answered on 19 Apr 2013, 09:36 AM
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.
Tags
Slider
Asked by
Henry
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Henry
Top achievements
Rank 1
Share this question
or