CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Luca95
Luca95

Reputation: 129

Slider for Bootstrap add&remove jQuery

I'm using https://seiyria.com/bootstrap-slider/ in order to have slider, but I'm not able to understand where is my fault in this code:

<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>

<div id="id1"></div>


<script>
    function ap() {
        console.log("Append");
        $("#id1").append(t);
    }

    function remove() {
        console.log("Remove");
        $("#x1").remove();
    }

    t = '<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> ' +
        '<input id="ex19" type="text" ' +
        'data-provide="slider" ' +
        'data-slider-ticks="[1, 2, 3]" ' +
        'data-slider-ticks-labels="["short", "medium", "long"]" ' +
        'data-slider-min="1" ' +
        'data-slider-max="3" ' +
        'data-slider-step="1" ' +
        'data-slider-value="3" ' +
        'data-slider-tooltip="hide" /></div>'
</script>

I wish to press a button in order to show a slider and to remove with the other button.

Upvotes: 1

Views: 45

Answers (2)

kadi seddik
kadi seddik

Reputation: 1

This should work,you forgot the t parameter in ap

function ap(t) {
    console.log("Append");
    $("#id1").append(t);
}

function remove() {
    console.log("Remove");
    $("#x1").remove();
}

t = '<div id="x1">' +
    '<span id="ex18-label-1" class="hidden">Example slider label</span> ' +
    '<input id="ex19" type="text" ' +
    'data-provide="slider" ' +
    'data-slider-ticks="[1, 2, 3]" ' +
    'data-slider-ticks-labels="["short", "medium", "long"]" ' +
    'data-slider-min="1" ' +
    'data-slider-max="3" ' +
    'data-slider-step="1" ' +
    'data-slider-value="3" ' +
    'data-slider-tooltip="hide" /></div>';

$("#show").click(function() {
    ap(t);
});

$("#hide").click(function() {
    remove();
});


function get_data(name) {
    name.value = 'test';
}
<button id="show">show</button>
<button id="hide">hide</button>
<div id="id1"></div>

Upvotes: 0

Sumesh TG
Sumesh TG

Reputation: 2575

<html>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/css/bootstrap-slider.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/bootstrap-slider.min.js"></script>
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>


<div id="id1">


</div>

<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels="["short", "medium", "long"]"  data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /></div>
</body>
</html>

<script>
 $("#x1").hide();
    function ap()
    {
        console.log("Append");
       $("#x1").show();
    }
    function remove()
    {
        console.log("Remove");
        $("#x1").hide();
    }

</script>

Just hide and show the slider using javascript.

Upvotes: 1

Related Questions