CSS Style input range

Asked

Viewed 857 times

2

I need to do an input range for age group definition this way:

inserir a descrição da imagem aqui

I thought I’d do the "big" bar with this 20-by-20 fixed strip, or a non-standard bar like in this example, but I’m new and I don’t understand what’s going on, let alone how to change the way I show age group values.
Any idea how to do?

EDIT: If anyone can explain the example of the link, I really appreciate the stylization of it that I will have to change if it is used.

html css input range

1 answer

0

This is the code of the site:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>
</head>
<body>

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>


</body>
</html>

From what I understand:

      min: 0,
      max: 500,
      values: [ 75, 300 ],

Here you set the minimum, maximum and default values (value that will appear when the page is loaded, without the user modifying the range)

<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">

Here is the styling, border:0 means it will not have border, color:#f6931f is the color of the text and font-Weight:Bold applies the bold effect to the text

Note: this example uses inline css, the best would be to use linked css recommend you read about it

Browser other questions tagged html css input range

You are not signed in. Login or sign up in order to post.