Prevent overlapping of range sliders in HTML and CSS

I have designed a range slider with two buttons, but they are overlapping each other. I want to ensure that they do not cross over one another - where the value of the first button should be equal to the minimum value of the second button, and the maximum value of the first button should be equal to the value of the second button. Additionally, I only want the selected range to be displayed in brown color, while the rest remains white.

Below is the code snippet:

.range_container {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.sliders-control {
  position: relative;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
 }

 input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 100%;
  position: absolute;
  background-color: brown;
  pointer-events: none;
  border-radius: 10px;
  border: 1px solid black;
}

.values{
  background-color: #3264fe;
  width: 32%;
  position: relative;
  margin: auto;
  padding: 10px 0;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  font-size: 25px;
  color: #ffffff;
}
.values:before{
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-top: 15px solid #3264fe;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   margin: auto;
   bottom: -14px;
   left: 0;
   right: 0;
}

#fromSlider {
  height: 0;
  z-index: 1;
  top: 5px;
  background: none;
  border: none;
}

#min-value {
  float: left;
}

#max-value {
  float: right;
}

<span id="min-value">&#x20b9;{{value1}}</span> <span id="max-value">&#x20b9;{{value2}}</span>
<div class="range_container">
  <div class="sliders-control">
    <input id="fromSlider" type="range" step="500" [(ngModel)] = "value1" value="{{value1}}" min="7000" max="100000" />
    <input id="toSlider" type="range" step="500" [(ngModel)] = "value2" value="{{value2}}" min="7000" max="100000" />
  </div>
</div>

Current output:

Desired output:

The objective is to prevent the slider buttons from crossing each other.

htmlcssangularfrontend

Answer №1

I trust this meets your requirements. I've incorporated some javascript code to handle the range slider and buttons.

function toggleSlider(fromSlider, toSlider) {
  const [from, to] = getParsed(fromSlider, toSlider);
  customizeSlider(fromSlider, toSlider, '#C6C6C6', 'brown', toSlider);
  if (from >= to) {
    fromSlider.value = to-500;
  }
}

function adjustToSlider(fromSlider, toSlider) {
  const [from, to] = getParsed(fromSlider, toSlider);
  customizeSlider(fromSlider, toSlider, '#C6C6C6', 'brown', toSlider);
  setToggleAccessibility(toSlider);
  if (from <= to) {
    toSlider.value = to;
  } else {
    toSlider.value = from+500;
  }
}

function getParsed(currentFrom, currentTo) {
  const from = parseInt(currentFrom.value, 10);
  const to = parseInt(currentTo.value, 10);
  return [from, to];
}

function customizeSlider(from, to, sliderColor, rangeColor, controlSlider) {
  const rangeDistance = to.max - to.min;
  const fromPosition = from.value - to.min;
  const toPosition = to.value - to.min;
  controlSlider.style.background = `linear-gradient(
      to right,
      ${sliderColor} 0%,
      ${sliderColor} ${(fromPosition)/(rangeDistance)*100}%,
      ${rangeColor} ${((fromPosition)/(rangeDistance))*100}%,
      ${rangeColor} ${(toPosition)/(rangeDistance)*100}%, 
      ${sliderColor} ${(toPosition)/(rangeDistance)*100}%, 
      ${sliderColor} 100%)`;
}

function setToggleAccessibility(currentTarget) {
  const toSlider = document.querySelector('#toSlider');
  if (Number(currentTarget.value) <= 0) {
    toSlider.style.zIndex = 2;
  } else {
    toSlider.style.zIndex = 0;
  }
}

const fromSlider = document.querySelector('#fromSlider');
const toSlider = document.querySelector('#toSlider');
customizeSlider(fromSlider, toSlider, '#C6C6C6', 'brown', toSlider);
setToggleAccessibility(toSlider);

fromSlider.oninput = () => toggleSlider(fromSlider, toSlider);
toSlider.oninput = () => adjustToSlider(fromSlider, toSlider);
.range_container {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.sliders-control {
  position: relative;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 100%;
  position: absolute;
  background-color: brown;
  pointer-events: none;
  border-radius: 10px;
  border: 1px solid black;
}

.values {
  background-color: #3264fe;
  width: 32%;
  position: relative;
  margin: auto;
  padding: 10px 0;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  font-size: 25px;
  color: #ffffff;
}

.values:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-top: 15px solid #3264fe;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  margin: auto;
  bottom: -14px;
  left: 0;
  right: 0;
}

#fromSlider {
  height: 0;
  z-index: 1;
  top: 6px;
  background: none;
  border: none;
}

#min-value {
  float: left;
}

#max-value {
  float: right;
}
<span id="min-value">&#x20b9;{{value1}}</span> <span id="max-value">&#x20b9;{{value2}}</span>
<div class="range_container">
  <div class="sliders-control">
    <input id="fromSlider" type="range" step="500" [(ngModel)]="value1" value="{{value1}}" min="7000" max="100000" />
    <input id="toSlider" type="range" step="500" [(ngModel)]="value2" value="{{value2}}" min="7000" max="100000" />
  </div>
</div>

Answer №2

updateSlider(event: any) {

  const value = event.target.value;
  const id = event.target.id;

  
  if ((id === 'fromSlider' && value > this.value2) || (id === 'toSlider' && value < this.value1)) {
    if (id === 'fromSlider') {
      this.value2 = value;
    } else {
      this.value1 = value;
    }
  }
}

Connect the event handler to handle the input event for each slider. Omit the value attribute as it is not needed when using Angular's two-way data binding with [(ngModel)] syntax.

 <input id="fromSlider" type="range" step="500" [(ngModel)]="value1" min="7000" max="100000" (input)="updateSlider($event)" />
<input id="toSlider" type="range" step="500" [(ngModel)]="value2" min="7000" max="100000" (input)="updateSlider($event)" />

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

What are the specific pages on a three-page website that require canonical tags?

I seem to be facing an issue with Google Search Console. The error message states: Duplicate without user-selected canonical Currently, my site looks like the following. There are a total of 6 links. https://i.stack.imgur.com/s4uXF.png None of these l ...

htmlcanonical-link

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

Display an HTML5 canvas element on a live webpage

Recently I was given a task to create an HTML page that allows users to interact and generate templates on a web application. Users can use the web browser to design a template and save it. Seems simple, right? The challenge came when I needed to let user ...

jqueryhtmlcanvas

Currently, I am encountering a problem as I attempt to iterate through a dynamic table

I have a table containing various elements. An example row is Jack Smith with multiple rows like this: col1 col2 col3 col4 col5 col6 col7 col8 jack smith 23 Y Y error error_code error_desc The table is ...

javascripthtml

Top tips for creating effective Angular 2 components

My application features a user object that stores and updates all user information using an observable provided by the userService. I am now contemplating the best practice for utilizing this user observable with components. One specific scenario involves ...

angularangular2-observables

Tips for incorporating a CSS transition when closing a details tag:

After reviewing these two questions: How To Add CSS3 Transition With HTML5 details/summary tag reveal? How to make <'details'> drop down on mouse hover Here's a new question for you! Issue I am trying to create an animation when t ...

javascriptjqueryhtmlcsstransition

Proper alignment of content in HTML using Bootstrap following the integration of .json data

After aligning the emergency hotlines properly, I am struggling to position the text under the image to display the data in three rows. I attempted col-4 but encountered issues with JSON. My objective is to show the image followed by the numbers directly b ...

htmlcssjsontwitter-bootstrap

Using XML in Angular for POST requests

I am currently working with Angular (not AngularJS) and have a web service that uses SOAP to interact with XML data. Although I've searched extensively, I haven't been able to find a comprehensive example of a POST request using XML. If anyone ...

angularxml-parsingxmlhttprequesthttp-postangular2-http

Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red. I have tried various methods to update the background color upon selection ...

javascriptcssreactjsreact-table

Refreshing Django HTML table dynamically upon database updates

Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...

htmlajaxdjangodatabaseweb-applications

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

htmlcss

How to toggle the visibility of specific div elements within a v-for loop depending on their content?

I am working on a scenario where I have a collection of objects displayed in a v-for loop. Each object has a specific key value pair, and I want the user to be able to toggle a button outside the loop to show or hide elements based on that key value. Initi ...

javascriptjqueryhtmlvue.js

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

Utilize Angular to transform items in a nested array into comma-delimited values prior to assigning them to a grid

Here is an excerpt from a JSON response retrieved from an API: { "totalCount": 2, "customAttributes": [ { "objectType": "OWNER", "atrributeId" ...

arraysjsonangular

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Is there any impact on performance when specifying div.class or p.class instead of just .class if a certain class will only be used on divs or paragraphs? ...

cssperformanceoptimization

Error 404 encountered when updating packages in Angular2 tutorial: platform-browser-dynamic.umd.js

I recently started following an Angular2 tutorial, but upon returning to it and reaching the Routing chapter, I realized that the tutorial had been slightly updated. This required me to go back and update the package.json file to match the current version, ...

angularjsangularnpm

Generic type input being accepted

I am trying to work with a basic generic class: export class MyType<T>{} In the directive class, I want to create an @Input field that should be of type MyType: @Input field MyType<>; However, my code editor is showing an error that MyType& ...

angulartypescript

Switch the ngClass on the appropriate ancestor element for the dropdown menu

Utilizing Angular CLI version 8.3.0, I aim to construct a sidebar featuring a drop-down menu. My objective is to apply the "open" class to toggle the opening of the drop-down section. However, the current challenge I am encountering is that when I click to ...

javascriptangulartypescript

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss