Get more than one ui slider on a document
Question
how to get two jquery ui slider on aa page , when i used id slider for than one div only first slider is shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
.
.
.
.
.
<div id="left_panel">
<div id="panel_title">
Left Panel
</div>
<textarea id="txt" > </textarea>
<input type="checkbox" name="right_to_left" value="Bike">
Right to Left
<br/>
<div id="font_family">
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
hello
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
</div>
<br/>
Size:<div class="font_size" class="slider"></div>
Opacity:<div class="font_opacity" class="slider"></div>
</div>
<div id="middle_panel">
I am in middle
</div>
</div>
</div>
</body>
Please suggest?html
2 answers
solution1
1 2013-08-22 09:13:44
use by class , don't use with id, id must be unique
Size:<div class="font_size slider"></div>
Opacity:<div class="font_opacity slider"></div>
solution2
1 ACCPTED 2013-08-22 09:26:36
You can add as many as you want in one page and to make them work independently you should use uniques selectors and id is the best one. Here is a fiddle to make it clear.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Display value of Jquery UI Sliders if more than one slider is present on a site
Slider component with more than one row
Update more than one document in a loop
document.querySelectorAll( more than one dataset );
Drag more than one jQuery ui
JQuery UI Slider in Highcharts using more then one datapoint
How get the selector of an element from a web page with more than one document html?
Slider Not Sliding More Than One Iteration Each Way (JavaScript)
The script does not work when there is more than one slider on the page
Adding more than one javascript image slider on same page
Related Tags