Topic: increase input range track ball for mobile devices

support3 pro asked 7 years ago


how to increase input range track ball for mobile devices?

Michal Szymanski staff answered 7 years ago


Thank you for contribution, we appreciate it :)

support3 pro answered 7 years ago


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;
	}
}

support3 pro answered 7 years ago


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;
it's helps

Michal Szymanski staff answered 7 years ago


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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No