Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Details of Loan
    Loan Amount 25000$
    Interest Rate % pa4
    Tenure Years3
    Your Monthly EMI Amount is
    <%@ Page Title="Slider-Default Functionalities-ASP.NET-SYNCFUSION" Language="C#" MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true"
        CodeBehind="DefaultFunctionalities.aspx.cs" Inherits="WebSampleBrowser.Slider.DefaultFunctionalities" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadSection" runat="server">
    </asp:Content>
    <asp:Content ID="Content5" ContentPlaceHolderID="ControlsSection" runat="server">
    
        <div class="frame">
            <div id="loanheading">
                Details of Loan
            </div>
            <span class="ColumnLeft"><span class="loan">Loan Amount</span></span> <span class="ColumnRight">
                <span class="value">25000</span><span id="loantext">$ </span></span>
            <ej:Slider ID="loanSlider" runat="server" Value="25000" MinValue="10000" MaxValue="1000000" 
                       IncrementStep="10" ClientSideOnChange="onchange" ClientSideOnSlide="onchange"></ej:Slider>
            <span class="ColumnLeft"><span class="interest">Interest Rate</span></span> <span
                class="ColumnRight"><span id="interesttext">% pa</span><span class="value">4</span>
            </span>
            <ej:Slider ID="interestSlider" runat="server" Value="4" MinValue="1" MaxValue="20" IncrementStep="1" 
                       ClientSideOnChange="onchange" ClientSideOnSlide="onchange"></ej:Slider>
            <span class="ColumnLeft"><span class="tenure">Tenure</span> </span><span class="ColumnRight">
                <span id="tenuretext">Years</span><span class="value">3</span> </span>
            <ej:Slider ID="tenureSlider" runat="server" Value="3" MinValue="1" MaxValue="20" IncrementStep="1" 
                       ClientSideOnChange="onchange" ClientSideOnSlide="onchange"></ej:Slider>
            <div id="result">
                Your Monthly EMI Amount is <span id="EventLog"></span>
            </div>
    
        </div>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ScriptSection" runat="server">
        <script type="text/javascript">
            var loanObj, interestObj, tenureObj, loanValue = 0, interestValue = 0, tenureValue = 0;
            $(function () {
    
                var loanvalue = 25000, interestvalue = 4, tenurevalue = 3;
                loanObj = $('#<%=loanSlider.ClientID%>').data('ejSlider');
                interestObj = $('#<%=interestSlider.ClientID%>').data('ejSlider');
                tenureObj = $('#<%=tenureSlider.ClientID%>').data('ejSlider');
                calculate();
            });
            function onchange(args) {
                this.wrapper.prev().children('span.value').html("");
                this.wrapper.prev().children('span.value').html(args.value);
                calculate();
            }
            function calculate() {
                var loan = loanObj.getValue(), interest = interestObj.getValue(), tenure = tenureObj.getValue();
    
                var P = loan;
                var y = interest / 1200;
                var tenureamt = tenure * 12;
    
                //actual processing
                var top = y * (Math.pow((1 + y), tenureamt));
                var bottom = (Math.pow((1 + y), tenureamt)) - 1;
                var ans = top / bottom;
                var final = P * ans;
                var z = Math.round(final);
    
    
                $('#EventLog').html("$ " + z);
            }
    
    
        </script>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="StyleSection" runat="server">
        <style type="text/css" class="cssStyles">
            .e-slider-wrap.e-horizontal .e-handle {
                top: -3px;
            }
    
            .e-slider-wrap.e-vertical .e-handle {
                left: -3px;
            }
    
            .frame {
                width: 50%;
            }
    
            .loan, .interest, .tenure {
                margin-top: 5px;
                font-weight: 400;
            }
    
            .value, #loantext, #interesttext, #tenuretext {
                float: right;
                position: relative;
                width: auto;
                padding-left: 3px;
            }
    
            #loantext, #interesttext, #tenuretext {
                width: auto;
            }
    
            #result {
                margin-top: 25px;
                text-align: center;
                font-weight: 600;
            }
    
            .frame .e-slider-wrap {
                display: block;
                margin-top: 40px;
            }
    
            .ColumnLeft {
                width: 35%;
                float: left;
                font-weight: 400;
                margin-top: 10px;
            }
    
            .ColumnRight {
                width: 65%;
                float: right;
                font-weight: 600;
                margin-top: 14px;
            }
    
            #loanheading {
                font-size: larger;
                padding-bottom: 15px;
            }
        </style>
    </asp:Content>
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Slider
    {
        public partial class DefaultFunctionalities : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
        }
    }