title: Create jQuery sliders with plus/minus buttons to add /subtract value from the slider
body: <p>i'm trying to replicate what you can see in the image here in jquery to make a touch enabled version of an existing application:
  <img src="https://i.stack.imgur.com/h8Fuf.png" alt="jquery slider plus - minus"></p>
  
  <p>I'm using jquery-ui sliders and i'd like to keep using them because i have a lot of business logic tied to them, actually they have this look:</p>
  
  <p><img src="https://i.stack.imgur.com/m9QWB.png" alt="enter image description here"></p>
  
  <p>I need help for the css and html part, i don't know how to make the effect where the "slider" gets filled when the user click on the "plus" button and on how i should organize my HTML to achieve that look. </p>
  
  <p>My markup is as follows:</p>
  
  <pre><code>  &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div id="timeName"&gt;
            Tempo a disposizione
          &lt;/div&gt;
  
          &lt;div id="travelTime"&gt;
            &lt;div class="selectedHandler"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class='paramName'&gt;
            Architecture and Heritage
          &lt;/div&gt;
  
          &lt;div id="Architecture_and_Heritage" class="param" data-id="3"&gt;
            &lt;div class="selectedHandler"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class='paramName'&gt;
            Culture
          &lt;/div&gt;
  
          &lt;div id="Culture" class="param" data-id="5"&gt;
            &lt;div class="selectedHandler"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class='paramName'&gt;
            Fairs Performances and Special Events
          &lt;/div&gt;
  
          &lt;div id="Fairs_Performances_and_Special_Events" class="param" data-id="6"&gt;
            &lt;div class="selectedHandler"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class='paramName'&gt;
            Food and Drink
          &lt;/div&gt;
  
          &lt;div id="Food_and_Drink" class="param" data-id="1"&gt;
            &lt;div class="selectedHandler"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>