increase input range track ball for mobile devices

Topic: increase input range track ball for mobile devices

support3 pro asked 10 years ago

how to increase input range track ball for mobile devices?

Add comment

Michal Szymanski staff pro premium priority answered 10 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>

Add comment

support3 pro answered 10 years ago

0 0 Best answer

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

Add comment

support3 pro answered 10 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff pro premium priority answered 10 years ago