InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

jQuery tutorials

    jQuery Ajax

    • jQuery JSONP
    • jQuery .post()
    • jQuery .load()
    • load script with cache enabled
    • jQuery .ajax() file upload

    jQuery CSS

    • change table cells color based on value
    • check if element is visible in viewport
    • display auto fade out message
    • fitvids.js for automatically resizing videos
    • get class list of an element
    • jQuery toggleClass() examples
    • make a div stick at top on scroll
    • table with alternate color rows

    jQuery Events

    • Javascript/jQuery - disable right click
    • jQuery - text input field - change keyup and paste events
    • trigger click using jQuery or Javascript

    jQuery DOM

    • jQuery html() vs text()
    • Check if an element exists
    • find total DOM elements
    • jQuery encode string to html entities
    • jQuery - read and modify iframe content
    • jQuery - create iframe with content
    • jQuery - find select element selectedIndex, value and text
    • jQuery - get checkbox value and checked state
    • jQuery - get javascript object

    jQuery Cookbook

    • get jQuery version
    • jQuery - add text to existing div
    • jQuery sliding effect - slideUp, slideDown, slideToggle

    jQuery UI

    • jQuery UI make element movable
    • jQuery ui slider and input text box - one way binding
    • jQuery ui slider and input text box - two way binding
     
    • Home
    • > Tutorials
    • > Javascript
    • > jQuery

    jQuery ui slider and input text box – one way binding

    on Aug 28, 2016

    jQuery ui can be used to create a slider with updated value also getting displayed.

    Syntax:

    <div id="slider"></div>
     
    <script>
      $("#slider").slider();
    </script>

    Example – slider and input text box – one way binding

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <div id="slider"></div><br/>
    <input id="slidervalue" type="text" disabled></div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function () {
      $("#slider").slider({
        min: 10,
        max: 90,
        step: 2,
        value: 10,
        slide: function( event, ui ) {
          $("#slidervalue").val(ui.value);
        }
      });
      var initialValue = $("#slider").slider("option", "value");
      $("#slidervalue").val(initialValue);
    });
    </script>
    refresh done
    try it online

    Suggested posts:

    1. jQuery ui slider and input text box – two way binding
    2. jQuery – text input field – change keyup and paste events
    3. Javascript – textarea and text input select all
    4. HTML5 – input placeholder
    5. jQuery – difference between html() and text()
    6. jQuery – find select element selectedIndex, value and text
    7. HTML input checkbox
    8. CSS text-decoration – underline, overline and strikeout text
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged Javascript, jQuery, jquery UI, Tutorials

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress