I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider.
so if I had
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>
is there an easy way to transform that into a slider?
here is what I´ve done, please let me know if there is a better way
<script
type='text/javascript'
src='js/jquery-1.5.1.min.js'>
</script>
<script
type='text/javascript'
src='js/jquery-ui-1.8.13.custom.min.js'>
</script>
<style type='text/css' media='all'>
@import 'css/dot-luv/jquery-ui-1.8.13.custom.css';
</style>
<style>
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider" ).slider({
value:1,
min: 1,
max: 3,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
<div class="demo">
<p>
<label for="amount">amount (1 increments):</label>
<select id="amount" disabled="disabled" style="border:0; color:#f6931f; font-weight:bold;">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<div id="slider"></div>
</div>