I'm having trouble aligning multiple vertical UI sliders on the same line. Here's what I'm looking to achieve: 1. Have 4 vertical sliders displayed in a row. 2. Show numerical values as the user moves each slider.
The code I'm currently using displays the numbers on each slider. However, the sliders are stacked in a single column. How can I place them in a row?
I tried to share my code via fiddle, but ran into some issues.
Any help in resolving this issue would be greatly appreciated.
MY HTML + JS CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>jQuery UI Slider functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-4" ).slider({
orientation:"vertical"
});
$( "#slider-4" ).slider({
orientation:"vertical",
value:50,
slide: function( event, ui ) {
$( "#minval4" ).val( ui.value );
}
});
$( "#minval4" ).val( $( "#slider-4" ).slider( "value" ) );
$( "#slider-5" ).slider({
orientation:"vertical",
value:50,
slide: function( event, ui ) {
$( "#minval5" ).val( ui.value );
}
});
$( "#minval5" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
<!-- Your code here -->
<style>
[id^="slider-"] + p {
float: left;
margin-right: 1em;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="container">
<div id="slider-4"></div>
<p>
<label for="minval4">Minumum value4:</label>
<input type="text" id="minval4"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-5"></div>
<p>
<label for="minval5">Minumum value5:</label>
<input type="text" id="minval5"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
</div>
</body>
</html>