designing a vertical HTML5 range input

Attempting to customize a vertical range input, here is what has been implemented:

input[type='range'] {
    -webkit-appearance: slider-vertical;
    background-color: #ccc;
    height: 158px;
    width: 2px;
    margin: 8px auto;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 20px;
    background-color: #3ebede;
    height: 30px;
    width: 30px;
}

However, it appears that due to the '-webkit-appearance: slider-vertical;' declaration to make it vertical, the styles are not being applied as expected.

Is there a method to style a vertical range without using transforms or plugins?

Note: Specifically looking for a solution that works on Chrome only

UPDATE: Refer to this JSFiddle link to view the current implementation.

csshtml

Answer №1

Here is a solution to your query that involves using different selectors. Further details can be found here.

-webkit-transform:rotate(90deg); - Implement this code to make the element vertical and adjust margins as needed.

You can also utilize Google for more insights!

The article highlights:

CSS FOR WEBKIT BASED BROWSERS (CHROME, SAFARI, OPERA)

In webkit browsers, styling of track is done with pseudo selector ::-webkit-slider-runnable-track, while thumb is styled using ::webkit-slider-thumb.

Custom focus styles are applicable on both thumb and track. If opting for this approach, default focus styles on input must be removed.

You can view an example in a fiddle by clicking here. The CSS used is taken from my previous reference material.

HTML

<input type="range" />

CSS

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Single-use condition for checkbox functionality in JavaScript

As a newcomer to javascript programming, I am struggling to make a checkbox display two radio buttons only when it is unchecked, even after researching solutions. Here is my current code snippet: <span><strong>Not Available</strong></ ...

javascripthtmlformsif-statementcheckbox

Internet Explorer 8 does not properly display table padding

Here is an image showing a table displayed in Chrome 5. The same table appears differently when viewed in IE8: To see the webpage for yourself, click on this link: To fix the padding issue that IE8 does not handle correctly, use this CSS rule: td#conten ...

htmlcssinternet-explorercross-browser

Vuetify does not support Tailwind CSS styles

Initially, I integrated Tailwind CSS into my project. However, during the development process, I decided to give Vuetify a try. After adding Vuetify along with vuetify-loader, I encountered an issue where Vuetify functionality was working fine but the styl ...

csslaravelvue.jsvuetify.jstailwind-css

Explore registrations by year and month

I am currently working on coding where a record needs to be displayed based on the date (Month, Year), for instance: 12-2022. However, with the current code I have, I am unable to achieve this. Can anyone offer some guidance on what steps I should take? ...

phphtmlcsssqldate

Trouble uploading document into mysql database

Creating a form in HTML using Bootstrap involves including specific elements for file uploads like this: <div class="form-group"> <label for="inputPic">Item Image</label> <input type="file" name="inputPic"> <p class= ...

phphtmlmysqltwitter-bootstrap

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

Intelligent programming and innovative thinking to streamline template diversity

My goal is to create multiple child websites using a base HTML/CSS template. Each child website will have unique color schemes and image variations for elements like <h> tags and background colors. I am searching for ways to easily modify the base th ...

htmlcss

Invoking a C/C++ library from a web server

As someone who is relatively new to web programming, I am in the process of developing an HTML5-based user interface that needs to interact with a middle ware written in C/C++. I would prefer not to rely on any browser-specific features or libraries for th ...

c++htmlwebserver

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have: <div id="bloquetexto4" class="bloquetexto"> <H2><b>TITULO</b></H2> <p>Texto bla bla bla.</p ...

htmlcss

What is the best way to include JavaScript CDN scripts in a component rather than in the index.html file?

There are three scripts located in the index.html file within the public folder: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

javascripthtmljqueryreactjs

What is the best way to adjust the height of an IFrame to match the size of its content?

I attempted to set the height of an IFrame to 100% (similar to setting a <div> to height:auto). I specified the height attribute in the <iframe> tag as 100% and also set the height in the style to 100%, but it doesn't appear to be functio ...

javascriptjqueryhtmlcssiframe

Listening for Events on Multiple Groups of Radio Buttons

How can a dynamic Javascript/JQuery event listener determine which radio button group has been clicked and retrieve the value of the checked element? If there are two radio button groups, how would you differentiate between them? How could this be achieved ...

javascriptjqueryhtmlcss

Modifying the content of a div element on the main webpage by utilizing JavaScript from a separate page

(primary.html) <div> Insert Any Text Here </div> (secondary.html) <button class="start" onclick="updateContent()">Start</button> (script.js) function updateContent() { // How can I dynamically change the ...

javascripthtmlcss

Using HTML/CSS to create custom styled boxes for reusability in Bookdown

I'm looking to create reusable sections for my bookdown project. Successes: I've created a style.css including: .titeldefbox{ display: flex; width: 100%; left: 0; top: 0; position: absolute; background-color: darkslategray; height: ...

htmlcssyamlr-markdownbookdown

I am encountering challenges with submitting the form

I am encountering an issue where I want to submit the form on button click and navigate to the next page, but instead I get an error message saying: "Form submission canceled because the form is not connected". Does anyone have a solution for this problem ...

htmlangulartypescriptnebularngx-admin

How to remove the parent.parent.parent element when a button is clicked in Angular without utilizing the element's ID

I am currently developing a website where users should have the ability to delete li-elements with just one click. These li elements are contained within bootstrap containers, which means that when deleting, I want to remove the entire container along with ...

htmlangulartypescript

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

jquerycsscheckbox

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Avoiding caching on HTML pages rendered by the SharePoint content editor web part

Is there a way to prevent caching on a HTML file displayed in a SharePoint library using a content editor web part? I attempted the following methods in the HTML file, but they were unsuccessful: <meta http-equiv="Cache-Control" content="no-cache" /&g ...

htmlcachingsharepoint-2010

Navigating through Ajax load selector

I am attempting to implement an 'infinite scroll' feature using Ajax (specifically utilizing Jquery's .load function). The function triggers successfully, but in cases where it works, it generates a large number of articles. To address this ...

javascriptjqueryhtmlajaxinfinite