This range slider script will help you to display an awesome Icon based range slider. You can either click on icon or bar it also changes the color as per slider range. The slider purely created on CSS and javascript no third party plugin needed.
HTML
|
CSS
@import "lesshat"; @steps : 6; // Set max value here @padding: unit(100 / @steps, %); // Scaling the slider @container-width: unit((@steps / 100) * 500, %) ; // Container width // Colors @gray : #d2d2d2; @light-gray: #f1f1f1; @orange: #ffb72f; @pink: #fce0d6; @blue: #bad6ef; @yellow: #ffe12f; @black: #383838; @red: #fd6b6b; // Style html{ min-height:100%; } body{ background: url(https://i.imgur.com/t17127v.jpg) no-repeat; background-size: 100% auto; background-position: center center; margin: 0; width: 100%; height: 100%; } .input-range { position: absolute; top: 50%; left: 50%; width: @container-width; .translate(-50%,-50%); display: flex; flex-wrap: wrap; justify-content: center; #range-slider{ width: calc(100% - @padding); order: 10; margin: 0; border:none; background-color:@light-gray; margin-top: 2vw; border-radius:2vw; height: .8vw; @media screen and (max-width:768px){ margin-top: 4vw; } .ui-slider-range { background-color:@blue; border-radius:2vw; .transition(all ease 250ms); cursor:pointer; height: .8vw; } .ui-slider-handle{ background-color: @blue; border: none; width: 1.5vw; height: 1.5vw; border-radius: 20px; transform: translateY(-50%); top: 50%; margin-left: -.75vw; box-shadow: 0 0 5px rgba(0, 0, 0, 0.20); outline:none; .transition(all ease 250ms); cursor:pointer; } each(range(@steps){ &[data-value="@{value}"] { .ui-slider-range, .ui-slider-handle { background-color: if((@value > @steps / 3), if((@value > @steps / 1.5), @red, @orange), @blue); } } }); } .labels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; .fas { width:calc( 100% / @steps); text-align: center; cursor:pointer; &:before{ font-size: 4vw; } &:hover{ .scale(1.1); } color: @light-gray; .transition(all ease 250ms); } each(range(@steps){ &[data-value="@{value}"] .fas:nth-child(-n + @{value}){ color: if((@value > @steps / 3), if((@value > @steps / 1.5), @red, @orange), @blue); text-shadow:0 0 10px rgba(0, 0, 0, 0.2); } }); } } |
JS
var max = 6, // Set max value initvalue = 4, // Set the initial value icon = "fa-fire", // Set the icon (https://fontawesome.com/icons) target = document.querySelectorAll('[data-value]'), listIcon = document.getElementById("labels-list"); // Function to update du value function updateValue(target, value){ target.forEach(function(currentIndex) { currentIndex.dataset.value = value; }); } // Init the number of item with the initial value settings for (i = 0; i < max; i++) { var picto = "+ icon +"">"; $(".labels").append(picto); } updateValue(target, initvalue); // Update the slider on click $('.fas').on( "click", function(){ var index = $(this).index() + 1; $( "#range-slider" ).slider( "value", index ); updateValue(target, index); }); // Init the slider $( "#range-slider" ).slider({ range: "min", value: initvalue, min: 1, max: max, slide: function( event, ui ) { updateValue(target, ui.value); } }); |
See live demo and download source code.
This awesome script developed by lefourbefromage. Visit their official repository for more information and follow for future updates.