Develop a slider feature based on radio button selection

Question

Develop a slider feature based on radio button selection

I am currently working with radio buttons for ticket selection.

 <div>
 <input type="radio" name="ticket" value="Standard"> Standard
 <input type="radio" name="ticket" value="Express"> Express
 <input type="radio" name="ticket" value="Priority"> Priority
 <input type="radio" name="ticket" value="Overnight"> Overnight
</div>

I am interested in converting the radio buttons into a slider using JavaScript, similar to this:

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

After researching online, I found a slider example on

w3schools

However, it does not offer a way to set specific selection points (breakpoints).

Additionally, I came across

<input type="range" id="myRange" value="90">

but I'm unsure how to create a range with limited values instead of a complete slider.

javascript jquery html css slider

Answer 1

Answer №1

Enhance your slider by segmenting it into sections with a touch of JavaScript and CSS magic. I've included markings to mimic the visual appeal you desire from the image in your query.

var slider = document.getElementById("myRange");
var output = document.getElementById("shipping");
output.innerHTML = slider.value; // Display the default slider value

var labels = ['Standard', 'Express', 'Priority', 'Overnight'];

slider.value = 0;
sliderInputChange();

// Update the current slider value (each time you drag the slider handle)
slider.oninput = sliderInputChange;

function sliderInputChange() {
  var val = slider.value;
  var unit = 12.5;
  var optionNum;

  if (val <= 25) {
    slider.value = unit;
    optionNum = 1;
  } else if (val <= 50) {
    slider.value = 25 + unit;
    optionNum = 2;
  } else if (val <= 75) {
    slider.value = 50 + unit;
    optionNum = 3;
  } else {
    slider.value = 75 + unit;
    optionNum = 4;
  }
  output.innerHTML = 'Shipping: ' + labels[optionNum - 1];
}

@import url('https://fonts.google.com/?query=lato&selection.family=Lato:300');

body {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: black;
  outline: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.mark {
  width: 2px;
  height: 30px;
  background-color: #aaa;
  position: fixed;
  top: 6px;
  z-index: -1;
}

.mark1 {
  left: 13%;
}

.mark2 {
  left: 38%;
}

.mark3 {
  right: 13%;
}

.mark4 {
  right: 38%;
}


/* Customize slider handle appearance */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

#shipping {
font-family: "Lato";
font-size: 2rem;
font-weight: 300;
}

<div class="container">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <div class="mark mark1"></div>
  <div class="mark mark2"></div>
  <div class="mark mark3"></div>
  <div class="mark mark4"></div>

  <p id="shipping"></p>
</div>

Answer 2

Enhance your slider by segmenting it into sections with a touch of JavaScript and CSS magic. I've included markings to mimic the visual appeal you desire from the image in your query.

var slider = document.getElementById("myRange");
var output = document.getElementById("shipping");
output.innerHTML = slider.value; // Display the default slider value

var labels = ['Standard', 'Express', 'Priority', 'Overnight'];

slider.value = 0;
sliderInputChange();

// Update the current slider value (each time you drag the slider handle)
slider.oninput = sliderInputChange;

function sliderInputChange() {
  var val = slider.value;
  var unit = 12.5;
  var optionNum;

  if (val <= 25) {
    slider.value = unit;
    optionNum = 1;
  } else if (val <= 50) {
    slider.value = 25 + unit;
    optionNum = 2;
  } else if (val <= 75) {
    slider.value = 50 + unit;
    optionNum = 3;
  } else {
    slider.value = 75 + unit;
    optionNum = 4;
  }
  output.innerHTML = 'Shipping: ' + labels[optionNum - 1];
}

@import url('https://fonts.google.com/?query=lato&selection.family=Lato:300');

body {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: black;
  outline: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.mark {
  width: 2px;
  height: 30px;
  background-color: #aaa;
  position: fixed;
  top: 6px;
  z-index: -1;
}

.mark1 {
  left: 13%;
}

.mark2 {
  left: 38%;
}

.mark3 {
  right: 13%;
}

.mark4 {
  right: 38%;
}


/* Customize slider handle appearance */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

#shipping {
font-family: "Lato";
font-size: 2rem;
font-weight: 300;
}

<div class="container">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <div class="mark mark1"></div>
  <div class="mark mark2"></div>
  <div class="mark mark3"></div>
  <div class="mark mark4"></div>

  <p id="shipping"></p>
</div>

Answer 3

Answer №2

Adjust the example code snippet below to customize the range slider options:

var steps = [
    "Low",
    "Medium",
    "High",
    "Urgent"
];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = steps[slider.value]; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = steps[this.value];
}

#slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

<div id="slidecontainer">
  <input type="range" min="0" max="3" value="3" class="slider" id="myRange">
  <p> <span id="demo"></span></p>
</div>

Answer 4

Adjust the example code snippet below to customize the range slider options:

var steps = [
    "Low",
    "Medium",
    "High",
    "Urgent"
];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = steps[slider.value]; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = steps[this.value];
}

#slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

<div id="slidecontainer">
  <input type="range" min="0" max="3" value="3" class="slider" id="myRange">
  <p> <span id="demo"></span></p>
</div>

Develop a slider feature based on radio button selection

Answer №1

Answer №2

Similar questions

AngularJS Module Instantiation Error

The res.render function is failing to render the view and instead, it is generating

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

Enhancing the appearance of an Angular.js application

Switch Cursor on Movable Area in Electron

Translating from JavaScript to Objective-C using JSON

Best practices for utilizing the getTile() method within Google Maps

What is the best way to add a dropdown menu in front of a button?

Netbeans fails to detect Jquery

Learn how to display each element in a list one by one with a three-second interval and animated transitions in React

When I use the select picker class, the <select> tag does not appear as intended

What sets apart passing arguments to a function from utilizing variables at the class level?

How can you calculate the number of elements in a jQuery array and iterate through each of them?

Troubleshooting a Node.js problem with variable scope

Error encountered when dividing MySQL data into three separate columns

Exploring IndexedDB with Multi-dimensional Relationships

Why is Angular.orderBy not displaying any data on the Page?

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

Deno -> What steps should I take to ensure my codes run smoothly without any errors?

Utilize JavaScript to Extract Information from an Array of JSON Objects