<script>
/**** Svelma Slider */
//inspired by W3Schhols Custom Slider https://www.w3schools.com/howto/howto_js_rangeslider.asp
//and Svelte Material UI Slider https://github.com/hperrin/svelte-material-ui/tree/master/packages/slider
/** Binding value*/
export let value = 50;
/** Limits */
export let min = 0;
export let max = 100;
/* Step - if discrete values are needed. */
//Use export let step = '' if you don't need discrete values
export let step = 0.1;
/**Sizes and shapes */
//default thickness of the rail
export let rail_thickness = 4; // nr of pixels
// Overall height of the slider
// can be "", or "is-small", "is-medium", "is-large"
export let size = "";
/** Colors */
//can be one of the following:
/* "white","black","light","dark","primary","info","link","success",
"warning","danger","black-bis","black-ter","grey-darker","grey-dark"
"grey","grey-light","grey-lighter","white-ter","white-bis" */
//rail= the complete path the handle moves on
export let rail_color = "grey-lighter";
//trail = the part of the path from origin to handle
export let trail_color = "grey-dark";
//the handle color
export let handle_color = "white";
//The color of the ring of the handle - visible when slider has focus
//can be only one of these: "", or "is-danger", "is-warning", "is-success", "is-info", "is-primary"
export let ring_color = "";
/*End of Colors Section **/
const prefix = "has-background-";
let input_amended = "input " + ring_color + " " + size;
let railclass = prefix + rail_color;
let trailclass = prefix + trail_color;
let handleclass = prefix + handle_color;
$: traillength = (value-min)/(max-min);
let rail_thick = rail_thickness + 'px'
let rail_radius = (rail_thickness / 2) + 'px';
function onStyling() {
this.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.style.boxShadow = window.getComputedStyle(this).getPropertyValue('box-shadow'); //the ring glows
this.previousElementSibling.style.border = window.getComputedStyle(this).getPropertyValue('border'); // the border of the handle gets darker
};
let input_settings = {
min : min,
max : max,
step : step,
}
</script>
<div class="control">
<div class = "{input_amended} make_way">
<div style="position:relative; width : 100%;">
<div style="left:{traillength*100}%; transform:translate({-traillength*12}px, -50%);" class="{input_amended} handle {handleclass}"></div>
<div style= "top: -{rail_radius}; border-radius: {rail_radius}; height: {rail_thick};" class="rail {railclass}"></div>
<div style= "top: -{rail_radius}; border-radius: {rail_radius}; height: {rail_thick}; transform:scaleX({traillength});" class="trail {trailclass}"></div>
<div style="left:{traillength*100}%; transform:translate({-traillength*12}px, -50%);" class="{input_amended} handle {handleclass}"></div>
<input class="{input_amended}" style= "border-radius: {rail_radius}; height: {rail_thick};transform: translateY(-{rail_radius});" type= range on:focus= {onStyling} on:blur= {onStyling} on:active= {onStyling} on:mouseover= {onStyling} on:mouseout= {onStyling} {...input_settings} bind:value>
</div>
</div>
</div>
<style lang="scss">
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
display: block;
padding: 0;
position: absolute;
opacity:0;
cursor: pointer;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px; /* Set a specific slider handle width */
height: 40px; /*Slider handle height */
border-radius: 5px;
cursor: pointer;
}
input::-moz-range-thumb {
-moz-appearance: none;
width: 12px; /* Set a specific slider handle width */
height: 40px; /* Slider handle height */
border-radius: 5px;
cursor: pointer; /* Cursor on hover */
}
.make_way {
padding-top:0;
padding-bottom:0;
border: none;
box-shadow: none;
}
.rail, .trail {
width: 100%;
display: block;
padding: 0;
border: none;
position: absolute;
left:0px;
cursor: pointer;
}
.trail {
transform-origin: left bottom;
will-change: transform;
}
.handle {
display: block;
padding: 0;
position: absolute;
width: 12px; /* Set a specific slider handle width */
border-radius: 5px;
cursor: pointer; /* Cursor on hover */
}
</style>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent