Create draggable line using easy trick

Question

I have this task, create draggable line like this img I want when I press plus button value increment and etc. please tell me how to create this script very easy if you know any plug in like this please give me links thank for help :)

enter image description here

yeas, Like this but I want add number increment and decrement buttons — Val Do, Nov 13 '14 at 13:51
You could have just Googled _jquery slider with values displayed_: http://stackoverflow.com/questions/10224856/jquery-ui-slider-labels-under-slider — balzafin, Nov 13 '14 at 13:52

score 1 · Accepted Answer · answered Nov 13 '14 at 14:06

Here's a simple solution to the problem using jQuery UI (fiddle: http://jsfiddle.net/rz12wbcL/)

$(function() {
    var btnDec = $('.dec');
    var btnInc = $('.inc');
      
    var slider = $( "#slider" ).slider({
        min: 0,
        max: 30,
        step: 5,
        range: "min",
        value: 0,
        slide: function( event, ui ) {
            console.log(ui.value);
            $('#slider_value').val(ui.value);
        }
    });
    btnInc.click(function () { slider.slider('value', slider.slider('value') + 5 ); $('#slider_value').val(slider.slider('value')); });
    btnDec.click(function () { slider.slider('value', slider.slider('value') - 5 ); $('#slider_value').val(slider.slider('value')); });
});

#slider_container * {
    float: left;
}
#slider {
    margin-left: 20px;
    margin-right: 20px;
}
input {
    width: 20px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="slider_container">
    <button class="dec">-</button>
    <div id='slider' style='width: 100px;'></div>
    <input type="text" id="slider_value" value="0" />
    <button class="inc">+</button>
</div>

Create draggable line using easy trick

1 Answers1