jube-fork/Jube.App/wwwroot/kendo/examples/slider/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content">
         <h4>Balance</h4>
         <input id="slider" class="balSlider" value="0" title="slider" />
         <h4 style="padding-top: 2em;">Equalizer</h4>
         <div id="equalizer">
             <input class="eqSlider" value="10" title="eqSlider1" />
             <input class="eqSlider" value="5"  title="eqSlider2" />
             <input class="eqSlider" value="0"  title="eqSlider3" />
             <input class="eqSlider" value="10" title="eqSlider4" />
             <input class="eqSlider" value="15" title="eqSlider5" />
         </div>
    </div>

    <script>
        $(document).ready(function() {
            var slider = $("#slider").kendoSlider({
                increaseButtonTitle: "Right",
                decreaseButtonTitle: "Left",
                min: -10,
                max: 10,
                smallStep: 2,
                largeStep: 1
            }).data("kendoSlider");

            $(".eqSlider").kendoSlider({
                orientation: "vertical",
                min: -20,
                max: 20,
                smallStep: 1,
                largeStep: 20,
                showButtons: false
            });
        });
    </script>

    <style>
        .demo-section {
            text-align: center;
        }

        #equalizer {
            padding-right: 15px;
        }

        div.balSlider {
            width: 100%;
        }

        div.balSlider .k-slider-selection {
            display: none;
        }

        div.eqSlider {
            display: inline-block;
            margin: 1em;
            height: 122px;
            vertical-align: top;
        }
    </style>
</div>


    
</body>
</html>