Jquery slider (selectbox into slider)

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>