Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Range Input Sliders disappear on mobile. Why?

Tags:

html

css

forms

Why do HTML5 inputs of type range disappear on mobile? See this page, inspect as a mobile device. I'm working on a simple site with a form but need the form to work on mobile. Thanks!

like image 970
9ete Avatar asked Jan 29 '17 17:01

9ete


People also ask

How do you show the value of the range slider on the thumb of the slider?

You cannot display value in the thumb but you can attach a bubble to the thumb which will contain and display the value as you slide. Refer to this detailed article Show slider value. Here's a demo. Save this answer.

Which input type creates a range slider?

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).

How do I create a vertical range slider in HTML?

For Chrome, use -webkit-appearance: slider-vertical . For IE, use writing-mode: bt-lr . For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way.


2 Answers

Range inputs do work properly on mobile (see Can I use...).

In your example (Link) it seems like a simulation issue of Google Chrome. If you test your link via Firefox or on a mobile device with Safari or Google Chrome the sliders work fine.

like image 133
aljoscha Avatar answered Oct 26 '22 23:10

aljoscha


It is compatible (if you believe caniuse): http://caniuse.com/#search=range%20input%20type

It should work.

like image 33
JoostS Avatar answered Oct 27 '22 00:10

JoostS