Create RadSlider in client side code.

4 posts, 1 answers
  1. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 17 Apr 2013 Link to this post

    Hi folks,

    Is it possible to create a RadSlider control using Javascript?

    Thanks
    Henry Gibbs
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Apr 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 19 Apr 2013 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Apr 2013 Link to this post

    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.
Back to Top