CODEWITHSUNDEEP
javascriptjqueryhtmlslider
Michael Pae
Michael Pae

Reputation: 11

jquery range-slider not appearing

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider functionality</title>

    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    <!-- Javascript -->
    <script>
        $(function () {
            $("#slider-3").slider({
                range: true,
                min: 0,
                max: 24,
                values: [9, 18],
                slide: function (event, ui) {
                    $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
                }
            });
            $("#price").val( $("#slider-3").slider("values", 0) + ":00" +
                " - " + $("#slider-3").slider("values", 1) + ":00");
        });
    </script>
</head>

<body>
    <!-- HTML -->
    <p>
        <label for="price">Email Working Timeframe</label>
        <input type="text" id="price"
               style="border:0; color:#b9cd6d; font-weight:bold;">
    </p>
    <div id="slider-3"></div>
</body>
</html>

The slider does not appear when I run the code/

I've the code on jsfiddle and it works fine, but I'm not sure why it's not working when I run it myself.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider functionality</title>

    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    <!-- Javascript -->
    <script>
        $(function () {
            $("#slider-3").slider({
                range: true,
                min: 0,
                max: 24,
                values: [9, 18],
                slide: function (event, ui) {
                    $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
                }
            });
            $("#price").val( $("#slider-3").slider("values", 0) + ":00" +
                " - " + $("#slider-3").slider("values", 1) + ":00");
        });
    </script>
</head>

<body>
    <!-- HTML -->
    <p>
        <label for="price">Email Working Timeframe</label>
        <input type="text" id="price"
               style="border:0; color:#b9cd6d; font-weight:bold;">
    </p>
    <div id="slider-3"></div>
</body>
</html>

The only output I get is "Email Working Timeframe"

Upvotes: 1

Views: 652

Answers (2)

Michael Pae
Michael Pae

Reputation: 11

It's working now. So the problem was in the Layout.html file which was calling(@RenderBody()) my index.html(the code above). The Layout.html was doing @Scripts.Render("~/bundles/jquery") and I was making another jquery link in the index.html which was redundant and the the jquery that I needed was not able to link.

Upvotes: 0

sanjay sisodiya
sanjay sisodiya

Reputation: 465

Please try according to the below script. it is working properly.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider functionality</title>

    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
    <!-- HTML -->
    <p>
        <label for="price">Email Working Timeframe</label>
        <input type="text" id="price"
               style="border:0; color:#b9cd6d; font-weight:bold;">
    </p>
    <div id="slider-3"></div>
</body>
<script>
$(document).ready(function(){
            $("#slider-3").slider({
                range: true,
                min: 0,
                max: 24,
                values: [9, 18],
                slide: function (event, ui) {
                    $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
                }
            });
            $("#price").val( $("#slider-3").slider("values", 0) + ":00" +
                " - " + $("#slider-3").slider("values", 1) + ":00");
        });
    </script>
</html>

Upvotes: 1

Related Questions