Menu icon Foundation
Range Slider - customizing data display

I'm messing around with range sliders to show a value in sq ft, and I've figured out how to move the data to above the slider and remove the outline and drop shadows, but I'm having a really hard time obliterating the up/down arrows that appear on hover. This leaves a huge space to the right of it where I want the "sq ft" to be.

Any suggestions? I have several uses for this slider and different values besides sq ft that I'm trying to display.

slider data value spacing issue

range sliderdata value customization

I'm messing around with range sliders to show a value in sq ft, and I've figured out how to move the data to above the slider and remove the outline and drop shadows, but I'm having a really hard time obliterating the up/down arrows that appear on hover. This leaves a huge space to the right of it where I want the "sq ft" to be.

Any suggestions? I have several uses for this slider and different values besides sq ft that I'm trying to display.

slider data value spacing issue

Monk almost 2 years ago

Anybody? I have not figured out a solution yet.

Is it possible to put the units as placeholder text within the data field?

daisymurphy almost 2 years ago

thanks for the information

Monk almost 2 years ago

Another image to help specify what I'm looking to remove (there is a space here typically, but the up/down arrows appear on hover):

I want to remove the up/down arrows and also the space they take up.

Rafi Benkual almost 2 years ago

This seems to work to hide it

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Monk almost 2 years ago

Yes it does! Thanks, good sleuthing!