jQuery UI slider labels

Question

I have the following UI slider on my page.

jQuery( document ).ready(function( $ ) {
        $( "#slider-payback" ).slider({
            range: "min",
            value:100,
            min: 18,
            max: <?php echo json_encode($max_payback); ?>,
            step: 6,

            slide: function( event, ui ) {
                $( "#payback-period" ).val( "" + ui.value )
                totalPayableFunc();
                monthlyPaymentsFunc();
            }
        });
        $( "#payback-period" ).val( "" + $( "#slider-payback" ).slider( "value" ) );
        totalPayableFunc();
        monthlyPaymentsFunc();
    });

Is it possible to easily add a 'min' and 'max' label on the slider though? I'm yet to attempt this because I'm unsure of the best way to tackle it.

Thanks

I'm attempting to add a 'min' label at the one end of the slider and a 'max' label at the other end. I'm just not sure what the best way is to tackle this. — Liam Fell, Jan 27 '16 at 10:22
https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations - this example shows how to do it. — kapser, Jul 17 '17 at 11:38

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

I am not sure about any external library but it is not possible with Jquery Slider itself.

But since you need only Min and Max header you could use following with combination HTML and CSS.

Add labels before and after Slider element in HTML.

<label>Min</label><div id="slider"></div><label>Max</label>

User below simple CSS

#slider {
    width: 50%;
    float :left;
}
label
{
    float : left;
}

JSFiddle http://jsfiddle.net/f74wzh8y/

You could also take a look at this. jQuery UI Slider Labels Under Slider

edited May 23 '17 at 12:04

Community

1
1

answered Jan 27 '16 at 10:41

pratikpawar

2,038
2
16
20

https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations – kapser Jul 17 '17 at 11:37

jQuery UI slider labels

1 Answers1