php - add a text field with onchange attribute to a slider -


i have got slider of internet, , want add text box slider, on value change inside slider, slider sets given value in text box.

<head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <title>papermashup.com | jquery ui slider demo</title>     <link href="../style.css"     rel="stylesheet" type="text/css" />     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>     <style type="text/css">         #container {             background:url(bg.jpg)!important;             padding:100px 50px 0px 50px;         }         /*the slider background*/         .slider {             width:230px;             height:11px;             background:url(slider-bg.png);             position:relative;             margin:0;             padding:0 10px;         }         /*style slider button*/         .ui-slider-handle {             width:24px;             height:24px;             position:absolute;             top:-7px;             margin-left:-12px;             z-index:200;             background:url(slider-button.png);         }         /*result div slider value displayed*/         #slider-result {             font-size:50px;             height:200px;             font-family:arial, helvetica, sans-serif;             color:#fff;             width:250px;             text-align:center;             text-shadow:0 1px 1px #000;             font-weight:700;             padding:20px 0;         }         /*this fill bar colour*/         .ui-widget-header {             background:url(fill.png) no-repeat left;             height:8px;             left:1px;             top:1px;             position:absolute;         }         {             outline:none;             -moz-outline-style:none;         }     </style> </head> <body>     <div class="slider"></div>     <div id="slider-result">50</div>     <div class="ui-widget-header"></div>     <input type="hidden" id="hidden" />     <script>         $(".slider").slider({             animate: true,             range: "min",             value: 50,             min: 0,             max: 80,             step: 1,             //this gets live reading of value , prints on page             slide: function (event, ui) {                 $("#slider-result").html(ui.value);             },             //this updates hidden form field can submit data using form             change: function (event, ui) {                 $('#hidden').attr('value', ui.value);             }         });     </script> </body>  </html>

hope explained enough.

well you're using jquery ui. script copied can read in comments part:

slide: function (event, ui) {                 $("#slider-result").html(ui.value); }

your result live updates.

so if little modification:

add html:

<input type="text" id="showslider" />

and modify live sliding thing/

slide: function (event, ui) {      $("#slider-result").html(ui.value);      $("#showslider").val(ui.value); }

then thing should work.

edit:

you add event listener textbox change value each time user typing or when presses enter (that's how want it) example of this:

$("#showslider").keyup(function (e){      $(".slider").slider("value", $("#showslider").val()); }

more information found here:

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


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more