Custom Range Input Plugin jQuery - Download Slim Custom Range Input Plugin With jQuery - html-input-range

Download Slim Custom Range Input Plugin With jQuery – html-input-range

By Posted on

This time I will share jQuery Plugin and tutorial about Slim Custom Range Input Plugin With jQuery – html-input-range, hope it will help you in programming stack.

Custom Range Input Plugin jQuery - Download Slim Custom Range Input Plugin With jQuery - html-input-range
File Size: 6.39 KB
Views Total: 8563
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

html-input-range is a jQuery plugin to create a slim, elegant, custom range slider from a standard HTML range input that enables the user to pick a number within a specific range.

How to use it:

1. Import the latest jQuery library together withe the jQuery html-input-range plugin’s JavaScript and Stylesheet into the document.

view source
1 <link rel="stylesheet" href="html-input-range.css">
2 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
3         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
4         crossorigin="anonymous">
5 </script>
6 <script src="html-input-range.js"></script>

2. Create a normal range input on the page.

view source
1 <input type="range" id="html-input-range">

3. Initialize the plugin to create a custom range input from the range input.

view source
1 $(document).ready(function () {
2   htmlInputrange.default();
3 });

4. Enable/disable the tooltip that displays the current value when your drag the range slider.

view source
1 $(document).ready(function () {
2   htmlInputRange.options({
3     tooltip: true
4   });
5 });

5. Set the max value.

view source
1 $(document).ready(function () {
2   htmlInputRange.options({
3     max: 90
4   });
5 });

6. Override the default styles to create your own theme.

view source
001 .html-inupt-range {
002   position: relative;
003   height: 15px;
004 }
005  
006 .html-inupt-range input[type='range'] {
007   -webkit-appearance: none;
008   height: 6px;
009   margin: 0;
010   background: #a29bfe;
011   box-shadow: 0 0 3px rgba(0, 0, 0, 0.24);
012   border-radius: 2px;
013   outline: none;
014   cursor: pointer;
015 }
016  
017 .html-inupt-range input[type="range"]::-webkit-slider-thumb {
018   -webkit-appearance: none;
019   width: 14px;
020   height: 14px;
021   box-shadow: 0 0 3px rgba(0, 0, 0, 0.24);
022   background-image: linear-gradient(to bottom, #6c5ce7 0, #6c5ce7 100%);
023   border-radius: 50%;
024 }
025  
026 .html-input-range-custom input[type='range'] {
027   position: relative;
028   z-index: 99;
029   opacity: 0;
030 }
031  
032 .html-input-range-custom .hir-tracker-bg,
033 .html-input-range-custom .hir-tracker-bg::after,
034 .html-input-range-custom .hir-tracker-bg::before {
035   position: absolute;
036   box-shadow: 0 0 3px rgba(0, 0, 0, 0.24);
037 }
038  
039 .html-input-range-custom .hir-tracker-bg {
040   top: 10px;
041   left: -7px;
042   width: calc(100% + 15px);
043   height: 6px;
044   background-color: #a29bfe;
045   border-radius: 5px;
046 }
047  
048 .html-input-range-custom .hir-tracker-bg::after,
049 .html-input-range-custom .hir-tracker-bg::before {
050   content: '';
051   z-index: 1;
052   top: -4px;
053   width: 14px;
054   height: 14px;
055   border-radius: 50%;
056   background-color: #fff;
057   border: 1px solid #a29bfe;
058   box-shadow: 0 0 3px rgba(0, 0, 0, 0.24);
059 }
060  
061 .html-input-range-custom .hir-tracker-bg::before {
062   left: 0;
063 }
064  
065 .html-input-range-custom .hir-tracker-bg::after {
066   right: 0;
067 }
068  
069 .html-input-range-custom .hir-tracker-thumb,
070 .html-input-range-custom .hir-tracker-thumb::after {
071   position: absolute;
072   background-color: #6c5ce7;
073 }
074  
075 .html-input-range-custom .hir-tracker-thumb {
076   top: 10px;
077   left: 0;
078   width: 0;
079   height: 6px

source : jquery.net

Related posts: