Jquery Range Slider Show and Hide Div

timbukto
December 6, 2024
120 views
1 vote
2 Answers

I am Trying to Show() and Hide() Divs ..But this way only works escalating and not backwards. heres the code im fiddling with.

    body {
        background-color: #6A6A6A;
    }

    html,
    body {
        height: 100%;
    }

    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #slider1 {
        position: absolute;
        top: 25px;
        left: 1%;
        height: 6vh;
        width: 175px;
        z-index: 9999;
    }

    .ui-slider .ui-slider-horizontal {
        height: .6em;
    }

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 25px !important;
        height: 10vh !important;
        cursor: default;
    }

    .div1,
    .div2,
    .div3,
    .div4,
    .div5 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    .div1 {
        background-color: #16168f;
    }

    .div2 {
        background-color: #268226;
    }

    .div3 {
        background-color: #ffbb00;
    }

    .div4 {
        background-color: #565656;
    }

    .div5 {
        background-color: #66668f;
    }

<div class="box">
    <div id="slider1"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</div>

<link rel="stylesheet" href="https://tim-school.com/codepen/jquery-slider/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(function () {
        $("#slider1").slider({
            range: "min",
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $(".div" + ui.value).show();
                $(".div" + ui.value - 1).hide();
            }
        });
    });
</script>

Im trying to Change the Div with the range Slider and HIDE any other Div I tried ui.value minus 1 Hide() but it doesn’t work. So my Question is How to Change a DIV with a Range Slider Forward and Backwards?

Answers

@Timbukto :-
With minor change in your code, you can easily achieve your expected result:

Add a common class to your html DIVs as shown below:

<div class="box">
    <div id="slider1"></div>
    <div class="slider_div div1"></div>
    <div class="slider_div  div2"></div>
    <div class="slider_div div3"></div>
    <div class="slider_div div4"></div>
    <div class="slider_div div5"></div>
</div>

and now change the js script as shown below:

       $("#slider1").slider({
            range: "min",
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $(".slider_div").hide();   // it will hide any of the active div
                $(".div" + ui.value).show();
                
            }
        });

So, for JS script, first hide the active/displayed div and then show the div which is needed to show.

I found a little issue in your jQuery function. You need to select all divs at the same time and hide them first. I will provide sample code.

$(function () {
    $("#slider1").slider({
        range: "min",
        min: 0,
        max: 5,
        value: 0,
        slide: function (event, ui) {
            // Select all divs and hide them first.
            $(".div1, .div2, .div3, .div4, .div5").hide();
                    
            // Show the div corresponding to the current slider value
            $(".div" + ui.value).show();
        }
    });
});

body {
    background-color: #6A6A6A;
}

html,
body {
    height: 100%;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#slider1 {
    position: absolute;
    top: 25px;
    left: 1%;
    height: 6vh;
    width: 175px;
    z-index: 9999;
}

.ui-slider .ui-slider-horizontal {
    height: .6em;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 25px !important;
    height: 10vh !important;
    cursor: default;
}

.div1,
.div2,
.div3,
.div4,
.div5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.div1 {
    background-color: #16168f;
}

.div2 {
    background-color: #268226;
}

.div3 {
    background-color: #ffbb00;
}

.div4 {
    background-color: #565656;
}

.div5 {
    background-color: #66668f;
}

<html>
    <head>
        <link rel="stylesheet" href="https://tim-school.com/codepen/jquery-slider/jquery-ui.css">
    </head>
    <body>
        <div class="box">
            <div id="slider1"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
            <div class="div5"></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.