創建jQuery的滑塊與加/減按鈕從滑塊

Question

我試圖複製你可以在圖片中看到這裏jQuery中，以使現有的應用能夠觸摸版加法/減法值：

我使用jQuery UI的滑塊，我想使用它們，因爲我有很多的業務邏輯依賴於他們的保留，實際上他們有這個樣子：

我需要幫助CSS和HTML部分，我不知道如何使「滑塊」獲取fil的效果當用戶點擊「加號」按鈕時，以及如何組織我的HTML來實現這種效果。

我的標記如下：

<table> 
    <tr> 
     <td> 
     <div id="timeName"> 
      Tempo a disposizione 
     </div> 

     <div id="travelTime"> 
      <div class="selectedHandler"></div> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <div class='paramName'> 
      Architecture and Heritage 
     </div> 

     <div id="Architecture_and_Heritage" class="param" data-id="3"> 
      <div class="selectedHandler"></div> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <div class='paramName'> 
      Culture 
     </div> 

     <div id="Culture" class="param" data-id="5"> 
      <div class="selectedHandler"></div> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <div class='paramName'> 
      Fairs Performances and Special Events 
     </div> 

     <div id="Fairs_Performances_and_Special_Events" class="param" data-id="6"> 
      <div class="selectedHandler"></div> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <div class='paramName'> 
      Food and Drink 
     </div> 

     <div id="Food_and_Drink" class="param" data-id="1"> 
      <div class="selectedHandler"></div> 
     </div> 
     </td> 
    </tr> 
    </table> 

Answer 1

這是任何幫助嗎？這不是真正的風格，但那種給人的想法

http://jsfiddle.net/TU95t/

感謝