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

Rafi Benkual over 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 */
}

daisymurphy over 2 years ago

thanks for the information

Monk over 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.

Monk over 2 years ago

Yes it does! Thanks, good sleuthing!

Monk over 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?