increase input range track ball for mobile devices

Topic: increase input range track ball for mobile devices

support3 pro asked 8 years ago

how to increase input range track ball for mobile devices?

Add comment

Michal Szymanski staff pro premium priority answered 8 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 8 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 8 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 8 years ago