CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mtcrts70
mtcrts70

Reputation: 35

jQuery Mobile Slider with JS

Here is a JSFiddle:

https://jsfiddle.net/vm1jqakx/8/

HTML:

<form>
           <label for="text-1" class="contrastText">Adjust the slider to display a word in text box from JS steps array:</label>
           <input type="text" disabled="disabled" name="text-1" id="text-1" value="">
    </form>

    <form>
        <label for="slider-1"></label>
        <input type="range" name="slider-1" id="slider-1" min="0" max="4" value="0" step="1" data-popup-enabled="true">
    </form>

JS:

$(function() {

    var steps = [
        "Last",
        "dance",
        "with",
        "mary",
        "jane"
    ];

    $("input#slider-1").on("change", function (event) {
        var value = $(this).val();
        //alert(steps[value]);
    });

});

How can I make it such that based on the value of the slider 0-4, it displays the word in the input text box at that index from the 'steps' array. For example a slider value of 3 would display the word 'mary' in the input text box.

Upvotes: 1

Views: 39

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

To set the value of your input element, use:

$("#text-1").val(steps[value]);

JSFiddle: https://jsfiddle.net/vm1jqakx/9/

Upvotes: 2

Related Questions