I make a slider that changes values. I use jQuery UI Slider. How to put a value field next to the slider? For example, a calculator at http://okonka.com/

How to display the value, of course. You need exactly the field that will move with the slider and display the value.

The problem is that to insert a slider, I insert a div, and the insides diva script itself appends.

    1 answer 1

    JQuery UI Slider # Change Event

    UPD

    Even better is jQuery UI Slider # Slide Event

    All the functionality of the plugin is on the site, both documentation and all sorts of live examples. And I do not see there from the box what you need. Besides, I do not understand what is the difficulty in writing a couple of lines of code?

    [css] .view{ position:relative; } [HTML] <div class="default"> <div class="view"></div> <div class="slider"></div> </div> [Java Script] $( ".slider" ).slider({ value: 50, slide: function( event, ui ){ var val = ui.value, sliderWidth = $( ".slider" ).width(); $(".view").html(val).css("left",(sliderWidth*val)/100+"px"); } });
    • And where is the value displayed? The problem is not how to display, but how to add a div to the slider in which it will be displayed. To div went for the slider, as in the example. - Frontender
    • Properties position: relative to this div slider + the value of top and left is mathematically calculated, as an option. - Alex Krass
    • Probably, there is some more standard solution, based on the functionality of the plugin. - Frontender
    • @ Viktor Pavlov, here are some more examples from stackoverflow , if necessary. - Alex Krass