The jQuery UI site has a pretty straightforward example that covers
this:

http://jqueryui.com/demos/slider/#steps

On Oct 26, 8:03 am, JaVaCode <[email protected]> wrote:
> hey ,
>
> i am new to jQuery, I'm Developping someslider. and my problem is :
> I want to recover the value of thesliderin real time in a text box
> when I move myslider.
>
> if anyone can help me I would be  grateful .
>
> Here is my code :
>
> <!DOCTYPE html>
> <html>
>         <head>
>                 <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
>                 <title>jQuery UI Example Page</title>
>
>                 <link type="text/css" href="css/ui-lightness/jquery-
> ui-1.7.2.custom.css" rel="stylesheet" />
>                 <link type="text/css" href="../default.css" rel="stylesheet" 
> />
>                 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></
> script>
>                 <script language="JavaScript" src="../slider.js" ></script>
>                 <script type="text/javascript" src="js/jquery-
> ui-1.7.2.custom.min.js"></script>
>                 <script type="text/javascript">
>                         $(function(){
>
>                                 $('#slider').slider({
>                                         minValue: 0,
>                                         maxValue: 21000,
>                                         startValue: 1,
>                                         steps: 1,
>                                         range: true,
>                                         change: function(e,ui) {
>                                         var amount = 
> document.getElementById("t1")
>                                         amount.value=ui.value
>                                 }});
>
>                         });
>                 </script>
>                 <style type="text/css">
>                         /*demo page css*/
>                         body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 
> 50px;}
>                         .demoHeaders { margin-top: 2em; }
>                         #dialog_link {padding: .4em 1em .4em 
> 20px;text-decoration:
> none;position: relative;}
>                         #dialog_link span.ui-icon {margin: 0 5px 0 0;position:
> absolute;left: .2em;top: 50%;margin-top: -8px;}
>                         ul#icons {margin: 0; padding: 0;}
>                         ul#icons li {margin: 2px; position: relative; 
> padding: 4px 0;
> cursor: pointer; float: left;  list-style: none;}
>                         ul#icons span.ui-icon {float: left; margin: 0 4px;}
>                 </style>
>         </head>
>         <body>
>
>                 <!--Slider-->
>                 <h2 class="demoHeaders">Slider</h2>
>                 <div id="slider" ></div>
>
>                 <br>
>                 <br>
>                 <div>
>                 <input
>                         name="amount1"
>                         type="text"
>                         id="t1"> Euros
>
>                 </div>
>
>         </body>
> </html>

--

You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=.


Reply via email to