CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Chazy Chaz
Chazy Chaz

Reputation: 1851

slider tooltip extension without jquery mobile

I'd like to imitate what jquery mobile does here but without loading the library. Just using jquery and jquery-ui (I'd probably stop using jquery-ui if I knew how to create sliders without it).

I want to show the slider value (ui.value) inside the slider handle (ui.handle) and also in a div above the handle, like in the third example (Both options together):

var initialValue = 5;

$("#slider").slider({
    min: 1,
    max: 50,
    value: initialValue,
    start: function( event, ui ) {
        $(ui.handle).find('.ui-slider-tooltip').show();
    },
    stop: function( event, ui ) {
        $(ui.handle).find('.ui-slider-tooltip').hide();
    },
    slide: function( event, ui) {
        $(ui.handle).find('.ui-slider-tooltip').text(ui.value);
        $(ui.handle).text(ui.value);
    },
    create: function( event, ui ) {
        var tooltip = $('<div class="ui-slider-tooltip" />').css({
            position: 'absolute',
            top: -25,
            left: 0,
            border: '1px grey'
        });

        $(event.target).find('.ui-slider-handle').append(tooltip);
        $('.ui-slider-handle').text(initialValue);
    }
    });

But for some unknown reason, manipulating the slider handle is preventing to append anything to it or show/hide it.

I'm also having trouble to set the border of the tooltip, when inspecting the code it adds none automatically, and I don't know why... (jquery-ui ofc but why?)

I just want something like jquery mobile.

http://jsfiddle.net/udxgkbmv/1/

Upvotes: 1

Views: 324

Answers (1)

Adam Dunn
Adam Dunn

Reputation: 132

I was going to try to do it with a fancy text-shadow, but that wasn't going to work. I was able to add another inner DIV and appended it after the tooltip DIV. By default both the tooltip DIV and the inner DIV would have the initialValue in it. The slide event now updates both the inner and tooltip DIVs.

The issue with the border not showing up was just missing the border type (e.g., solid). I didn't add any styling to the tooltip or inner, and will leave that up to you.

$(document).ready(function () {
     var initialValue = 5;

     $("#slider").slider({
         min: 1,
         max: 50,
         value: initialValue,
         start: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').show();
         },
         stop: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').hide();
         },
         slide: function( event, ui) {
             $(ui.handle).find('div').text(ui.value);
             //$(ui.handle).text(ui.value);
         },
         create: function( event, ui ) {
              var tooltip = $('<div class="ui-slider-tooltip" />').css({
                 position: 'absolute',
                 top: -25,
                 left: 0,
                 border: '1px solid gray',
                 display: 'none'
             }).text(initialValue);
             var inner = $('<div class="ui-slider-inner" />').css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 display: 'block'
             }).text(initialValue);
             $(event.target).find('.ui-slider-handle').append(tooltip).append(inner);
             //$('.ui-slider-handle').text(initialValue);
         }
    });
});

JSFiddle: http://jsfiddle.net/udxgkbmv/3/

Upvotes: 1

Related Questions