Reputation: 3
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
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