Topic: increase input range track ball for mobile devices
how to increase input range track ball for mobile devices?
Add comment
Final solution! SCSS. Increasing trackball for BIG fingers (for all devices)
// Makes Range trackball more bigger
$trackball_size: 25px;
@mixin resize_range_trackball{
@include size($trackball_size);
border:$trackball_size / 4 solid $body-bg;
margin-top: -$trackball_size / 2.2;
transition:all .2s ease;
box-sizing:inherit;
&:active{
transform:scale(.9);
border-width: $trackball_size / 3;
}
}
input[type=range]{
&::-webkit-slider-thumb {
@include resize_range_trackball;
}
&::-moz-range-thumb {
@include resize_range_trackball;
}
&::-ms-thumb {
@include resize_range_trackball;
}
&::-ms-thumb {
@include resize_range_trackball;
}
}
i found at - forms-pro.scss :607
input[type=range]::-webkit-slider-thumb {...
input[type=range]::-moz-range-thumb {...
input[type=range]::-ms-thumb {...
create new variable: e.g.
$trackball_size: 22px;
and use it
height: $trackball_size;
width: $trackball_size;
margin: -$trackball_size / 2.2 0 0 0;
If you want to increase a maximum value for Range component, just change a value of "max" property:
<form class="range-field">
<input type="range" min="0" max="200" />
</form>FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No