<form id="calculator" novalidate>
    <div class="fieldset">
        <ul class="form-list">
            <li class="fields">
                <div class="field">
                    <label for="guests">Number of Guests<span class="required">*</span></label>
                    <div class="input-box">
                        <input name="guests" id="guests" value="" class="input-text required-entry" type="text" required="">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="field">
                    <label for="length">Length of Event (hours)<span class="required">*</span></label>
                    <div class="input-box">
                        <!-- <input name="length" id="length" value="" class="input-text required-entry" type="text" required="">-->
                        <select name="length" id="length" required="true" class="input-text required-entry">
                            <option value="" selected>Select</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                        <span class="error"></span>
                    </div>
                </div>
                <div class="field">
                    <label for="name">Champagne Toast?<span class="required">*</span></label>
                    <div class="input-box">
                        <input name="champagne" value="true" class="required-entry" type="radio"> Yes
                        <input name="champagne" value="false" checked="" class="required-entry" type="radio" style="margin-left:10px;"> No
                    </div>
                </div>
                <br>
                <div class="field">
                    <input type="hidden" name="wine-percent" id="wine-percent" value="50">
                    <input type="hidden" name="beer-percent" id="beer-percent" value="20">
                    <input type="hidden" name="spirit-percent" id="spirit-percent" value="30">
                    <input type="hidden" id="wineLastValue" value="50">
                    <input type="hidden" id="beerLastValue" value="20">
                    <input type="hidden" id="spiritsLastValue" value="30">
                    <table width="100%">
                         <tbody><tr>
                                <td class="slider-label" align="left">
                                     <label>Percentage of Wine</label>
                                </td>
                     </tr>
                     <tr>
                         <td style="width: 400px" colspan="2">
                             <input readonly="" class="slider-current-percentage" type="text" value="50" id="uxWine">
                             <input id="wine-lock" type="checkbox"><label for="wine-lock"> Locked in</label>
                             <br>
                             <div id="wineSlider"></div>
                         </td>
                    </tr>
                    <tr>
                         <td style="width: 200px" align="left">
                                0%<br>
                                <br>
                         </td>
                         <td style="width: 200px" align="right">
                                100%<br>
                                <br>
                         </td>
                    </tr>
                    <tr>
                         <td align="left" class="slider-label">
                                <label>Percentage of Beer</label>
                         </td>
                    </tr>
                    <tr>
                         <td style="width: 400px" colspan="2">
                             <input readonly="" class="slider-current-percentage" type="text" value="20" id="uxBeer">
                             <input id="beer-lock" type="checkbox"><label for="beer-lock"> Locked in</label>
                             <br>
                             <div id="beerSlider"></div>
                         </td>
                    </tr>
                    <tr>
                         <td style="width: 200px" align="left">
                                0%<br>
                         </td>
                         <td style="width: 200px" align="right">
                                100%<br>
                                <br>
                         </td>
                    </tr>
                    <tr>
                         <td class="slider-label" align="left">
                                <label>Percentage of Spirits</label>
                         </td>
                    </tr>
                    <tr>
                         <td style="width: 400px" colspan="2">
                             <input readonly="" class="slider-current-percentage" type="text" value="30" id="uxSpirits">
                             <input id="spirit-lock" type="checkbox"><label for="spirit-lock"> Locked in</label>
                             <br>
                             <div id="spiritSlider"></div>
                         </td>
                    </tr>
                    <tr>
                         <td style="width: 200px" align="left">
                                0%
                         </td>
                         <td style="width: 200px" align="right">
                                100%
                         </td>
                    </tr>
                    </tbody></table>

                </div>
            </li>
        </ul>
    </div>
    <div class="buttons-set">
        <button type="submit" title="Calculate" class="button"><span><span>Calculate</span></span></button>
    </div>
</form>