Элементы пользовательского интерфейса jQuery не работают

Question

У меня есть следующий калькулятор слайдера, который не работал.

Не могу понять, почему я не могу скользить баров здесь код.

<div style="widht: 700px;"> 
<table class="worksheet-table"> 
<tbody> 
<tr><th>Estimated Years to Retirement</th> 
<td> 
<div id="years-to-retirement-caption" class="caption">20 years</div> 
<div id="years-to-retirement-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 19.1919%;"></a></div> 
</td> 
</tr> 
<tr><th>Estimated Years in Retirement</th> 
<td> 
<div id="years-in-retirement-caption" class="caption">25 years</div> 
<div id="years-in-retirement-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 48.9796%;"></a></div> 
</td> 
</tr> 
<tr><th>Desired Annual Income in Retirement<br> <em>(just think about it in today's dollars)</em></th> 
<td> 
<div id="desired-annual-income-caption" class="caption">$80,000</div> 
<div id="desired-annual-income-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 32%;"></a></div> 
</td> 
</tr> 
<tr><th>Retirement Fund Needed</th> 
<td> 
<div id="retirement-fund-needed" class="caption">$2,000,000</div> 
</td> 
</tr> 
</tbody> 
</table> 
<table class="worksheet-table"> 
<tbody> 
<tr class="heading"><th colspan="2">Your Present Situation</th></tr> 
<tr><th>Superannuation</th> 
<td> 
<div id="superannuation-caption" class="caption">$100,000</div> 
<div id="superannuation-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a></div> 
</td> 
</tr> 
<tr><th>Savings (excluding home equity)</th> 
<td> 
<div id="savings-caption" class="caption">$10,000</div> 
<div id="savings-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 1%;"></a></div> 
</td> 
</tr> 
<tr><th>Shares</th> 
<td> 
<div id="shares-caption" class="caption">$20,000</div> 
<div id="shares-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 2%;"></a></div> 
</td> 
</tr> 
<tr><th>Equity Investment in Properties</th> 
<td> 
<div id="equity-caption" class="caption">$0</div> 
<div id="equity-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div> 
</td> 
</tr> 
<tr><th>Other</th> 
<td> 
<div id="other-caption" class="caption">$0</div> 
<div id="other-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div> 
</td> 
</tr> 
<tr><th>Today's Total Assets</th> 
<td> 
<div id="current-total-assets" class="caption">$130,000</div> 
</td> 
</tr> 
</tbody> 
</table> 
</div> 

Главная страница URL является http://www.insidewealth.com.au/calculate-your-retirement.html

Заранее спасибо

Answer 1

Я предполагаю, что вы не вызвали .slider() в любом месте, но это трудно сказать, без размещения кода.

$("#years-to-retirement-slider").slider(); // etc 

в любом месте принимаю.

Там также опечатка здесь:

<div style="widht: 700px;"> 

ширина, а не widht, но это не относится к проблеме.