SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

    Code HTML4Strict:
    <select id="someId" >
    <option>1</option>
    <option>1</option>
    <option>1</option>
    </select>

    is there an easy way to transform that into a slider?

  2. #2
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here is what Ive done, please let me know if there is a better way

    Code HTML4Strict:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •