Create jQuery sliders with plus/minus buttons to add /subtract value from the slider
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:
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:
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.
My markup is as follows:
<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">
<di开发者_如何学Pythonv 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>
Is this any help? It's not really styled but sort of gives the idea: http://jsfiddle.net/TU95t/
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
var select = $( "#demo" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
value: 1,
range: "min",
change: function(event, ui) {
var sliderValue = $( "#slider" ).slider( "option", "value" );
$('#sliderPosition').html(sliderValue);
}
});
$('#increase').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue + 1 );
});
$('#decrease').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue - 1 );
});
});
</script>
<div id="demo">
<div id="sliderPosition">1</div>
</div><!-- End demo -->
<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
+ Increase Slider Value
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
- Decrease Slider Value
</div>
</body>
</html>
<!-- End demo -->
加载中,请稍侯......
精彩评论