The positioning of the input slider in the Css is quite unconventional

I am currently facing a challenge in trying to embed an input slider within a parent div. The desired outcome is illustrated below:

https://i.sstatic.net/WAIyC.png

However, I encounter the issue that when attempting this setup, the input slider ends up with overly large width and distorted height as well.

A Fiddle has been created for reference:

.wrapper {
  display: inline-block;
    width: 100%;
    max-width: 100px;
    background: #353434;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
    font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', 'Arial'
}

.wrapper-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: .5rem;
}

.wrapper-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper-end {
   display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    height: 340px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.slider-value {
  min-width: 24px;
    padding: .25rem;
    border-radius: 2px;
    color: #1fcc1f;
    background: #333;
    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.5);
    font-family: 'VT323', monospace;
    text-align: center;
}

.button {
  padding: .55rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #4f4f4f 0%, #0e0e0e 100%);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.wrapper-end-left {
  height: 100%;
  background: red;
}

.wrapper-end-right {
  height: 100%;
  background: blue;
}

[type='range'] {
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    margin: 0;
    padding: 0;
    width: 30rem;
    height: 1.5em;
    transform:  rotate(-90deg);
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
    border: none;
    width: 1.5em; height: 1.5em;
    border-radius: 50%;
    background: #f90;
}

input[type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%; height: 100%;
    background: #ccc;
}
<div class="wrapper">
  <div class="wrapper-header">
      <div class="button">
        x
      </div>
      
        <div class="button">
        x
      </div>
  </div>
  
  <div class="wrapper-middle">
     <div class="slider-value">
       1
     </div>
  </div>
  
  <div class="wrapper-end">
    <div class="wrapper-end-left">
        <input type="range">
    </div>
    
    <div class="wrapper-end-right">
      two
    </div>
  </div>
</div>

Is there anyone who could shed light on why this anomaly is occurring?

I have extensively perused about input sliders but still unable to resolve it.

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ https://codepen.io/freoted/pen/WGvxmN https://jsfiddle.net/rwaldron/XukVc/

htmlcss

Answer №1

Although slightly unorthodox, the current layout is reminiscent of the desired design - further testing may be needed to determine its adaptability in different positions or sizes. An integral element that influenced the layout was setting the transform-origin and fine-tuning the positioning with translate3d

document.addEventListener('DOMContentLoaded',(e)=>{
  document.querySelector('[type="range"]').addEventListener('change',(e)=>{
    document.querySelector('div.slider-value').textContent=e.target.value > 0 ? e.target.value : e.target.value * -1;
  });
});
.wrapper {
  display: inline-block;
  width: 100%;
  max-width: 100px;
  background: #353434;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
  font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', 'Arial'
}
.wrapper,.wrapper *{
  box-sizing: border-box;
}
.wrapper-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: .5rem;
}
.wrapper-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper-end {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;

  height: 340px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.slider-value {
  min-width: 24px;
  padding: .25rem;
  border-radius: 2px;
  color: #1fcc1f;
  background: #333;
  box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.5);
  font-family: 'VT323', monospace;
  text-align: center;
}
.button {
  padding:0.55rem;
  border-radius:2px;
  background: linear-gradient(to bottom, #4f4f4f 0%, #0e0e0e 100%);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.wrapper-end-left {
  height: 100%;

  padding:0;
  margin:0 1.25rem 0 0;

  display:flex;
  flex-direction:column;
  flex-wrap:no-wrap;
  align-content:center;
  justify-content:stretch;
}

.wrapper-end-right {
  height:100%;
  width:0.75rem!important;
  background:linear-gradient(0deg, rgba(13,60,2,1) 0%, rgba(57,241,17,1) 79%, rgba(245,157,63,1) 92%, rgba(255,0,0,1) 100%);
}

.wrapper-end-left,
.wrapper-end-right{
  width:2rem;
}



[type='range'] {
   -webkit-appearance:none;
  margin:0;
  padding:0;

  flex:1;

  height:1.5rem;
  width:19.2rem;

  transform-origin:5% 50%;
  transform:rotate(-90deg) translate3d( -8.6rem, -0.25rem, 0 );
  background:transparent;
  outline:0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  border:none;
  width:1.5em;
  height:1.5em;

  border-radius:50%;
  background:black;
  border:2px solid silver;
  margin:-0.35rem 0 0 0;
}
input[type=range]::-webkit-slider-runnable-track {
  box-sizing:border-box;
  border:none;

  margin:0;
  padding:0;
  height:0.5rem;

  flex:1;
  background:#ccc;
}
<div class="wrapper">
  <div class="wrapper-header">
    <div class="button">x</div>
    <div class="button">x</div>
  </div>

  <div class="wrapper-middle">
   <div class="slider-value">0</div>
  </div>

  <div class="wrapper-end">
  <div class="wrapper-end-left"><input type="range" step=3 min=-60 max=12 value=0 /></div>
  <div class="wrapper-end-right">&nbsp;</div>
  </div>
</div>

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

Changing base 64 into Mp3 audio format using PHP

I currently have an "audio" tag with a script (which is essentially a plugin) that receives and saves it as base64. This functionality is working properly. My goal now is to modify the script in order to send the base64 data to the server, convert it to m ...

phpjqueryhtml

Techniques for displaying images in JavaScript through iteration

I am currently working on a function where I need to display photos using a loop. In the 'name1' variable, I have the file location of the photos and it changes with each loop iteration. When I use console.log, I can see the file path like "cardI ...

javascripthtml

Tips for setting up the information in a Bootstrap popover

I am currently working on a Google web app that involves Google Sheets data. My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display. What might I have done in ...

javascripthtmlcssbootstrap-4web-applications

Make sure the footer stays at the bottom of the page when the page height is short

I need to place a footer on my webpage in a specific way: It should be at the bottom of the page, even if the content in the main-container is short. In this case, a large vertical margin needs to be added that calculates as height(viewport) - height(m ...

htmlcssfooter

Restrict HTML Elements Based on Their Size

I have a text file with a substantial amount of content that I need to display in an HTML format. The challenge is that I only want to show a portion of the text on the screen, but I am unsure of the exact amount that needs to be displayed. What I do know ...

javascriptjqueryhtmlcss

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

javascripthtmlcssreactjssvg

In React JS, position the image at the top of the page, spanning the full width of the window

I've been trying to place a gif file at the top of the screen, but so far I haven't been successful. Currently, the gif file is taking up the entire page: <div style={{ backgroundImage: 'url(https://media.tenor.com/kKmvIr30vQYAAAAj/stars- ...

htmlcssreactjs

Summing Up Values in Jquery Loop Through Table Rows

I am facing a challenge with a table that contains a textfield for inputting numeric values. This textfield is part of a repeated row table, with the ID 'amount'. My goal is to calculate the sum of all values entered in the textfields with the ID ...

javascriptjqueryhtml

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

phphtmlcsswordpress

Unable to generate file with Compass

In my attempts to compile a project using compass, I have experimented with both the gui app and the command line. However, I consistently encounter the same error message in both cases: "Nothing to compile. If you're trying to start a new project, yo ...

csssasscompass-sass

A web-based interaction platform with HTML 5 integration built on Django

In the process of constructing a front end layout, I am utilizing HTML 5 within the django framework. The front end will display various posts, similar to those found on a discussion forum, and my goal is to enable users to leave comments on these posts. ...

djangohtml

The attempt to showcase items in a div element using inline display did not produce

I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below. What I am trying to achieve is a header at the top, followed by several sections containing a photo on ...

htmlcss

Clicking on the following link will initiate the process of submitting a form

I'm encountering an issue with the following code snippet: <a href='javascript:jQuery("#questionnaire").show();'>haha</a> When this code is placed inside a form, it mysteriously causes the form to submit upon clicking the link. ...

javascriptjqueryhtmlwordpress

Use the onClick attribute with Iframe

Is there a method to wrap an Iframe within another element to create a simulated onClick event? I am aware that Iframes do not support events, however, I require the ability to monitor clicks from my website that are being redirected through the Iframe. A ...

javascripthtmliframe

Troubleshooting Nested Handlebars Problem

After creating a customized handlebar that checks for equality in this manner: Handlebars.registerHelper('ifEquals', (arg1, arg2, options) => { if (arg1 == arg2) { return options?.fn(this); } return options?.inverse(t ...

htmltypescripthandlebars.js

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...

javascriptjquerycss

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

Ways to retrieve the href attribute value from an element in Python/Selenium even when there is no explicit href attribute present

I am facing an issue with retrieving the URL link from an element using the get_attribute('href') method. It returns a null value, as if the element does not have a href attribute. webdriver.find_element_by_xpath('//*[@id="__next"] ...

pythonhtmlseleniumselenium-webdriverhref

Is there a way to eliminate the additional and varying pseudo-padding on text inputs in both Webkit and Gecko browsers?

The issue I'm facing is specific to input[type="text"] elements in Webkit. No matter what adjustments I make, it seems like there is an additional padding: 1px 0 0 1px (top and left only) applied to the element. A similar anomaly occurs in Gecko as w ...

htmlcssfirefoxwebkit