Daily UI practice #1 - Input range slider and populating value in script

Daily UI practice

Recently I had some time so checked for latest updates in design from awwwards.com I wanted to practice UI for the day. So I picked up a site from there.
The reason I picked up that is
i) I wanted to learn something new
ii) I wanted to do something which I haven’t done before
So the exercise was about,

Creating a range slider and getting the value

Added box-shadow to jumbotron component.

Now placing input range elements inside the component,
Following bootstrap 4 documentation

I got the above screen as it looked like in bootstrap website. I can’t proceed further as I didn’t have any other elements to style. Then I read few tutorials from css-tricks.com

What is Shadow DOM?

Well, we all know that, when a HTML page is loaded in a browser DOM (Document Object Model) is created. Likewise browsers have capability to create sub tree to the already created DOM elements.






 
Now we have got two components and customize the styles. They are
1. Track

2. Thumb

The line upon which move and adjust the values is track and the element which we drag is called thumb.
To remove the default style

input[type=range] {
     -webkit-appearance: none;
     float:none;
   }
  

As these are shadow DOM elements their identifiers vary across all browsers.
In webkit based browsers,
Track ::webkit-slider-runnable-track
Thumb ::webkit-slider-thumb

In Firefox,
Track ::-moz-range-track
Thumb ::-moz-range-thumb

In IE 10+
Track ::-ms-track
Thumb ::-ms-thumb

how to style input[type="range"]

input[type=range] {
  -webkit-appearance: none;
  float:none;
}
/*track*/
input[type="range" i]::-webkit-slider-runnable-track{
 background-color: #e8e1fe;
 height: 4px;
}
input[type='range']::-moz-range-track {
 background-color: #e8e1fe;
 height: 4px;
}
input[type=range]::-ms-track {
 background-color: #e8e1fe;
 height: 4px;
}
/*track*/

/*thumb*/
input[type="range" i]::-webkit-slider-thumb{
 width:16px;
 height: 16px;
 border-radius:50%;
 background-color:#3f51b5;
   -webkit-appearance: none;
   margin-top: -6px;
}
input[type='range']::-moz-range-thumb {
 width:16px;
 height: 16px;
 border-radius:50%;
 background-color:#3f51b5;
   -webkit-appearance: none;
   margin-top: -6px;
}
input[type=range]::-ms-thumb {
 width:16px;
 height: 16px;
 border-radius:50%;
 background-color:#3f51b5;
   -webkit-appearance: none;
   margin-top: -6px;
}
/*thumb*/

Setting min max value to the range

<input class="form-control-range" id="expensesRange" max="2000" min="0" type="range" />

;

The farthest end of the slider will have a maximum value of 2000.

Value attribute for input range

The value attribute specifies the default value and returns the value set by user.

<input class="form-control-range" id="expensesRange" max="2000" min="0" type="range" value="0" />

How to populate the input value in a span tag

var rangeVal = $('input[type="range"]').val();
$('span).html(rangeVal);

The code snippet:







Don't miss reading this article Front end web development

To sum up,
1. Input range can be custom styled.
2. Shadow DOM gives selectors to styles input ranges
3. It has track and thumb component
4. To make it consistent across vendor prefixes, exact vendor prefixes should be used
5. input range has three attributes min, max and value

Try our next jquery practice article

Follow our FB page @CreativeTechnocrayts
Subscribe to Creative Technocrayts and be a part of growing community.