CODEWITHSUNDEEP
javascriptjquery
chris masefield
chris masefield

Reputation: 3

jQuery slider value above slider

I have a slider that I need help changing, when I slide the slider the value should appear above the slider.

This is my slider / values: http://gyazo.com/342b1592d5d175b7321efb36cbc2424c

Also my slider value should be whatever the first value of the slider is and NOT 0.

JavaScript:

$(function() {
    var valMap = [0, 6500, 14000, 28000, 50000];
    $( ".slider.gems" ).slider({
        max: valMap.length - 1,
        slide: function(event, ui) {
            $(".number.gems").text(ui.value);
            $(".number.gems" ).text(valMap[ui.value]);
        }
    });
    $( ".number.gems" ).text( $( ".slider.gems" ).slider( "value" ) );
});

Upvotes: 0

Views: 109

Answers (1)

Sushil
Sushil

Reputation: 2835

you can do something like this. set the min value of the slider to 1 and create an event handler for slide and create events which will update the slider value

this is the html 

<div style='padding: 5px;'>
    <div id="gems"></div>
</div>

here's what your js should look like 

var gems = $("#gems"),
    initialValue = 0;

var valMap = [0, 6500, 14000, 28000, 50000];

var updateSliderValue = function(e, ui) {
    var slider = $(this).data().slider;

    slider.element.find(".ui-slider-handle").text(valMap[ui.value]);
};
console.log(valMap.length);

gems.slider({
    min: 1,
    max: (valMap.length - 1),
    slide: updateSliderValue,
    create: updateSliderValue,
    value: 6500
});

and here's how your css should be

#gems {
    margin: 60px 30px 0 30px     
}

#gems > .ui-slider-handle {
    text-decoration: none;
    width: 35px;
    text-align: center;
}

here's a working JSFIDDLE for the same.

Upvotes: 1

Related Questions