Full Width Slider With No Input

Description

You can hide the number input and can make the slider full width using custom CSS.

Example

Following example demonstrates the use of full width slider in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Full Width Slider With No Input</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <style>
         .full-width-slider input {display: none;}
         .full-width-slider .ui-slider-track {margin-left: 10px;}
      </style>
   </head>
   
   <body>
      
      <form class = "full-width-slider">
         <label for = "slider1" class = "ui-hidden-accessible">Slider:</label>
         <input type = "range" name = "slider1" id = "slider1" min = "0" max = "100" 
            value = "60">
      </form>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as slider_fullwidth.html file in your server root folder.

  • Open this HTML file as http://localhost/slider_fullwidth.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements