├── preview.png ├── assets ├── scss │ ├── styles.scss │ ├── base │ │ └── _base.scss │ ├── config │ │ └── _variables.scss │ └── components │ │ └── _range.scss ├── js │ └── main.js └── css │ └── styles.css ├── README.md └── index.html /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/range-slider/HEAD/preview.png -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'components/range'; 4 | -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | body{ 9 | font-family: var(--body-font); 10 | background-color: var(--body-color); 11 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Draggable Range Slider 2 | ## [Watch it on youtube](https://youtu.be/t7SAM2nZajE) 3 | ### Draggable Range Slider 4 | 5 | - Range Slider Using HTML CSS & JavaScript 6 | - Contains a custom range slider with a gradient background 7 | - With a float element that contains the value of the input. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --gradient-color: linear-gradient(95deg, 9 | hsl(286, 97%, 57%) -7%, 10 | hsl(256, 84%, 48%) 112%); 11 | --first-color-light: hsl(256, 64%, 88%); 12 | --first-color-lighten: hsl(256, 58%, 94%); 13 | --white-color: hsl(0, 0%, 100%); 14 | --body-color: hsl(256, 100%, 98%); 15 | 16 | /*========== Font and typography ==========*/ 17 | /*.5rem = 8px | 1rem = 16px ...*/ 18 | --body-font: 'Montserrat', sans-serif; 19 | --h1-font-size: 1.5rem; 20 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Range slider - Bedimcode 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 |
22 | 50 23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== RANGE SLIDER JS ===============*/ 2 | const rangeThumb = document.getElementById('range-thumb'), 3 | rangeNumber = document.getElementById('range-number'), 4 | rangeLine = document.getElementById('range-line'), 5 | rangeInput = document.getElementById('range-input') 6 | 7 | const rangeInputSlider = () =>{ 8 | 9 | // Insert the value of the input range 10 | rangeNumber.textContent = rangeInput.value 11 | 12 | // Calculate the position of the input thumb 13 | // rangeInput.value = 50, rangeInput.max = 100, (50 / 100 = 0.5) 14 | // rangeInput.offsetWidth = 248, rangeThumb.offsetWidth = 32, (248 - 32 = 216) 15 | const thumbPosition = (rangeInput.value / rangeInput.max), 16 | space = rangeInput.offsetWidth - rangeThumb.offsetWidth 17 | 18 | // We insert the position of the input thumb 19 | // thumbPosition = 0.5, space = 216 (0.5 * 216 = 108) 20 | rangeThumb.style.left = (thumbPosition * space) + 'px' 21 | 22 | // We insert the width to the slider with the value of the input value 23 | // rangeInput.value = 50, ancho = 50% 24 | rangeLine.style.width = rangeInput.value + '%' 25 | 26 | // We call the range input 27 | rangeInput.addEventListener('input', rangeInputSlider) 28 | } 29 | 30 | rangeInputSlider() 31 | -------------------------------------------------------------------------------- /assets/scss/components/_range.scss: -------------------------------------------------------------------------------- 1 | /*=============== RANGE SLIDER ===============*/ 2 | .container{ 3 | height: 100vh; 4 | margin-inline: 1.5rem; 5 | display: grid; 6 | place-items: center; 7 | } 8 | 9 | // Custom input range 10 | .range{ 11 | height: 64px; 12 | width: 100%; 13 | max-width: 332px; 14 | background-color: var(--first-color-light); 15 | border-radius: 4rem; 16 | box-shadow: 0 6px 16px hsla(256, 72%, 24%, .15); 17 | padding-inline: 2.5rem; 18 | display: grid; 19 | 20 | &__content{ 21 | position: relative; 22 | width: 100%; 23 | display: grid; 24 | place-items: center; 25 | } 26 | &__slider{ 27 | width: 100%; 28 | height: 16px; 29 | background-color: var(--first-color-lighten); 30 | border-radius: 4rem; 31 | box-shadow: 0 4px 12px hsla(256, 72%, 24%, .2); 32 | overflow: hidden; 33 | 34 | &-line{ 35 | width: 100%; 36 | height: 100%; 37 | background: var(--gradient-color); 38 | width: 0; 39 | } 40 | } 41 | &__thumb{ 42 | width: 32px; 43 | height: 32px; 44 | background-color: var(--first-color-lighten); 45 | border-radius: 50%; 46 | box-shadow: 0 0 12px hsla(256, 72%, 24%, .2); 47 | position: absolute; 48 | } 49 | // Value input range 50 | &__value{ 51 | width: 64px; 52 | height: 64px; 53 | background: var(--gradient-color); 54 | position: absolute; 55 | top: -82px; 56 | left: -16px; 57 | border-radius: 2rem 2rem 2rem .25rem; 58 | transform: rotate(-45deg); 59 | display: grid; 60 | place-items: center; 61 | 62 | &-number{ 63 | transform: rotate(45deg); 64 | color: var(--white-color); 65 | font-size: var(--h1-font-size); 66 | } 67 | } 68 | // Default input range 69 | &__input{ 70 | appearance: none; 71 | width: 100%; 72 | height: 16px; 73 | position: absolute; 74 | opacity: 0; 75 | 76 | &::-webkit-slider-thumb{ 77 | appearance: none; 78 | width: 32px; 79 | height: 32px; 80 | 81 | &:hover{ 82 | cursor: pointer; 83 | } 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --gradient-color: linear-gradient(95deg, 9 | hsl(286, 97%, 57%) -7%, 10 | hsl(256, 84%, 48%) 112%); 11 | --first-color-light: hsl(256, 64%, 88%); 12 | --first-color-lighten: hsl(256, 58%, 94%); 13 | --white-color: hsl(0, 0%, 100%); 14 | --body-color: hsl(256, 100%, 98%); 15 | 16 | /*========== Font and typography ==========*/ 17 | /*.5rem = 8px | 1rem = 16px ...*/ 18 | --body-font: "Montserrat", sans-serif; 19 | --h1-font-size: 1.5rem; 20 | } 21 | 22 | /*=============== BASE ===============*/ 23 | * { 24 | box-sizing: border-box; 25 | padding: 0; 26 | margin: 0; 27 | } 28 | 29 | body { 30 | font-family: var(--body-font); 31 | background-color: var(--body-color); 32 | } 33 | 34 | /*=============== RANGE SLIDER ===============*/ 35 | .container { 36 | height: 100vh; 37 | margin-inline: 1.5rem; 38 | display: grid; 39 | place-items: center; 40 | } 41 | 42 | /* Custom input range */ 43 | .range { 44 | height: 64px; 45 | width: 100%; 46 | max-width: 332px; 47 | background-color: var(--first-color-light); 48 | border-radius: 4rem; 49 | box-shadow: 0 6px 16px hsla(256, 72%, 24%, .15); 50 | padding-inline: 2.5rem; 51 | display: grid; 52 | } 53 | 54 | .range__content { 55 | position: relative; 56 | width: 100%; 57 | display: grid; 58 | place-items: center; 59 | } 60 | 61 | .range__slider { 62 | width: 100%; 63 | height: 16px; 64 | background-color: var(--first-color-lighten); 65 | border-radius: 4rem; 66 | box-shadow: 0 4px 12px hsla(256, 72%, 24%, .2); 67 | overflow: hidden; 68 | } 69 | 70 | .range__slider-line { 71 | width: 100%; 72 | height: 100%; 73 | background: var(--gradient-color); 74 | width: 0; 75 | } 76 | 77 | .range__thumb { 78 | width: 32px; 79 | height: 32px; 80 | background-color: var(--first-color-lighten); 81 | border-radius: 50%; 82 | box-shadow: 0 0 12px hsla(256, 72%, 24%, .2); 83 | position: absolute; 84 | } 85 | 86 | /* Value input range */ 87 | .range__value { 88 | width: 64px; 89 | height: 64px; 90 | background: var(--gradient-color); 91 | position: absolute; 92 | top: -82px; 93 | left: -16px; 94 | border-radius: 2rem 2rem 2rem .25rem; 95 | transform: rotate(-45deg); 96 | display: grid; 97 | place-items: center; 98 | } 99 | 100 | .range__value-number { 101 | transform: rotate(45deg); 102 | color: var(--white-color); 103 | font-size: var(--h1-font-size); 104 | } 105 | 106 | /* Default input range */ 107 | .range__input { 108 | appearance: none; 109 | width: 100%; 110 | height: 16px; 111 | position: absolute; 112 | opacity: 0; 113 | } 114 | 115 | .range__input::-webkit-slider-thumb { 116 | appearance: none; 117 | width: 32px; 118 | height: 32px; 119 | } 120 | 121 | .range__input::-webkit-slider-thumb:hover { 122 | cursor: pointer; 123 | } --------------------------------------------------------------------------------