Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 11, 2019
Embed
What would you like to do?
Range slider with dynamic icons
<div class="input-range">
<div id="range-slider" data-value=""></div>
<div id="labels-list" class="labels" data-value=""></div>
</div>
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 = "<i class='fas "+ icon +"'></i>";
$(".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);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
@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);
}
});
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.