Transforming numerical figures into written form within a specified range: A step-by-step guide

I have a unique custom range design that I have personally customized.

Beneath each step of the range, there is a value displayed in a stylish green box.

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

My query is regarding how I can replace the numeric values with text for each point on the range:

for value 1: display to everyone
for value 2: display to my group only
for value 3: display to only me

As I am unfamiliar with modifying JavaScript code, I would greatly appreciate any assistance provided.

Thank you.

var rangeSlider = function() {
  var slider = $(".range-slider"),
    range = $(".range-slider__range"),
    value = $(".range-slider__value");

  slider.each(function() {
    value.each(function() {
      var value = $(this)
        .prev()
        .attr("value");
      $(this).html(value);
    });

    range.on("input", function() {
      $(this)
        .next(value)
        .html(this.value);
    });
  });
};

rangeSlider();
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  body {
    padding: 60px;
  }
}

.range-slider {
  margin: 0;
}

.range-slider {
  width: 40%;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 6px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

.range-slider__range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}

.range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.range-slider__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}

.range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}

.range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
  display: block;
  position: relative;
  width: 66%;
  color: #fff;
  margin-top: 10px;
  line-height: 20px;
  text-align: center;
  background: green;
  padding: 5px 10px;
}

::.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: '';
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
  <span class="range-slider__value">0</span>
</div>

<!--<ul class="range-labels">
  <li class="active selected">Everyone</li>
  <li>only me</li>
  <li>private</li>
</ul>-->

javascripthtmlcss

Answer №1

Utilize an array containing all the text options and implement it as shown below.

var textArray = new Array();
textArray[1] = "display for all";
textArray[2] = "display for my group only";
textArray[3] = "display for me only";

var rangeSlider = function() {
  var slider = $(".range-slider"),
    range = $(".range-slider__range"),
    value = $(".range-slider__value");

  slider.each(function() {
    value.each(function() {
      var value = $(this)
        .prev()
        .attr("value");
        $(this).html(textArray[value]);
    });

    range.on("input", function() {
      $(this)
        .next(value)
        .html(textArray[this.value]);
    });
  });
};

rangeSlider();
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  body {
    padding: 60px;
  }
}

.range-slider {
  margin: 0;
}

.range-slider {
  width: 40%;
}
/* Styles for range slider omitted for brevity */


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
  <span class="range-slider__value">0</span>
</div>

<!--<ul class="range-labels">
  <li class="active selected">Everyone</li>
  <li>only me</li>
  <li>private</li>
</ul>-->

Answer №2

let customRangeSlider = function() {
  let slider = $(".custom-range-slider"),
    range = $(".custom-range-slider__range"),
    value = $(".custom-range-slider__value");

  slider.each(function() {
    value.each(function() {
      let val = $(this)
        .prev()
        .attr("value");
      $(this).html("All");
    });

    range.on("input", function() {
    let str = "";
    if(this.value == 1)
    str = "All";
    else if(this.value == 2)
    str = "Group";
    else
    str = "Me";
      $(this)
        .next(value)
        .html(str);
    });
  });
};

customRangeSlider();
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  body {
    padding: 60px;
  }
}

.custom-range-slider {
  margin: 0;
}

.custom-range-slider {
  width: 40%;
}

.custom-range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 6px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

.custom-range-slider__range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.custom-range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}

.custom-range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.custom-range-slider__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.custom-range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}

.custom-range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}

.custom-range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.custom-range-slider__value {
  display: block;
  position: relative;
  width: 66%;
  color: #fff;
  margin-top: 10px;
  line-height: 20px;
  text-align: center;
  background: green;
  padding: 5px 10px;
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="custom-range-slider">
  <input class="custom-range-slider__range" type="range" value="1" min="1" max="3" step="1">
  <span class="custom-range-slider__value">0</span>
</div>

<!--<ul class="range-labels">
  <li class="active selected">Everyone</li>
  <li>only me</li>
  <li>private</li>
</ul>-->

Answer №3

Set up a variable

let options = {1: 'display to all', 2: 'display within my group', 3: 'display only to myself'};

Then, you can retrieve the desired string using this method

$(this).html(options[value]);

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

moving the array generated on the HTML page to a different page

Can anyone help me with transferring an array from one page to another? I have a list of names in the code below and I want to be able to access and print this array on another page using JavaScript. Your assistance is greatly appreciated! <html> ...

htmlarrayswebcopy

The functionality of Selenium's get(link) feature appears to be experiencing issues

Recently, I wrote a simple piece of code using selenium to open a webpage. from time import sleep from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By import warnings warnings.simp ...

pythonhtmlselenium-webdriver

Angular 2 encountering troublesome JSON response with invalid characters

After fetching a JSON response from an external API, I noticed that one of the variable names starts with a # character, making it look like #text in the JSON structure. Unfortunately, Angular doesn't recognize this variable. Is there a way to remove ...

javascriptjsonangular

Res.redirect is failing to redirect and displaying error message 'Connection Unavailable'

Currently, I am in the process of developing a NodeJS + ExpressJS Ecommerce Website. My focus is on enhancing the functionality of the admin panel feature. Users can navigate to /admin/products/new to access a form. When the user completes and submits this ...

javascriptnode.jsexpress

Constructing an Http Post URL with form parameters using the Axios HTTP client

I need assistance in creating a postHTTP request with form parameters using axios on my node server. I have successfully implemented the Java code for constructing a URL, as shown below: JAVA CODE: HttpPost post = new HttpPost(UriBuilder.fromUri (getPro ...

javascriptnode.jsaxios

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS: HTML: <div class="myDiv"> <img src="http://bit.ly/1gHcL8T" class="imageCenter" /> </div> CSS: .myDiv { width: 80%; height: ...

css

Creating Original Tweets using Javascript without Repeating Images

I'm developing a Twitter bot using the Twit NPM package and need assistance on how to avoid posting duplicate images when uploading images to Twitter. The current image_path variable is responsible for scanning through my image directory, but I want ...

javascriptnode.jsnpmtwitterbots

Ensure that the mask implemented in the form input only shows two decimal places, while simultaneously retaining the original value

Is there a way to format a number in a form input so that it displays only two decimals while still retaining the original value? This is necessary to avoid incorrect values down the line and meets the customer's requirement of showing no more than tw ...

jqueryhtmlcssformsinput

"Retrieving Data Using jQuery's .ajax Method in Visual Basic

<WebMethod()> Public Shared Function gtet() As String ... Dim GET = uClass.GetSets(dbuser, dbparam1) ... End Function and $(document).ready(function () { data = { }; var jsondata = $.toJSON(data); $.ajax({ type: "GET ...

javascriptjqueryajaxvb.netjson

Configure a personalized expiration time for expo-auth-session in order to interact with the Fitbit API using the React Native framework in Expo

Is it possible to customize the expiration time for Fitbit implicit auth flow? The default time is set to one day, but I would like to extend it to one year. If you are using the web version, you can modify the expires_in parameter directly in the URL. Her ...

javascriptreact-nativeoauth-2.0expofitbit

Positioning the Submenu in Elementor Site

I've been working on creating a vertical navigation menu with a horizontal submenu for my website using Elementor. While I've made some progress, I'm struggling to position the submenu correctly. My goal is to have the submenu display next t ...

htmlcsselementor

Ways to retrieve the value of an Object that may have a key that is undefined

Is there a method similar to Angular's $parse service that can be used for accessing nested object properties? Consider an object structure like this: const obj = { items: [ { store: { type: '' } } ] }; Sce ...

javascriptangularjs

"JavaScript: Issue Encountered While Converting Hexadecimal to Decimal

I've been working on a custom function to convert hexadecimal to decimal in my Scratch project: function Hex2Decimal(hex){ var deci = 0; var num = 1; var hexstr = String(hex); hexstr = hexstr.toLowerCase(); var expon = 0; for( ...

javascripthexdecimal

Using TypeScript arrow function parentheses in the filter function

If I have an array of movie objects like this: const movies: Movie[] = [ movie1, movie2, movie3, movie4 ]; And if I want to remove a specific movie from the array, such as movie2, I can use the following code: movies = movies.filter( m => m !== ...

javascripttypescriptfilter

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

javascriptcss

Access a component from the @ViewChild without resorting to nativeElement

Is there a way to access the underlying div element using a @ViewChild? I have attempted the following approaches without success: ElementRef.prototype.nativeElement -- returns ElementRef HTMLDivElement -- returns undefined ElementRef -- returns ElementRe ...

javascriptangularviewchild

Issue with VueJS instance: Unable to prevent default behavior of an event

Is there a way to disable form submission when the enter key is pressed? Take a look at the different methods I've attempted along with the code and demo example provided below. SEE PROBLEM DEMO HERE Intended outcome: When you focus on the input, pr ...

javascriptvue.jspreventdefault

Proper functionality of Chrome Extension chrome.downloads.download

I am currently developing an extension with a feature that allows users to download a file. This file is generated using data retrieved from the localStorage in Chrome. Within my panel.html file, the code looks like this: <!DOCTYPE html> <html&g ...

javascriptgoogle-chromegoogle-chrome-extension

Introducing Row Offset Enhancement

I am working on a code to create a custom "table" because I require some more intricate features that a regular table cannot provide. <div class="container"> <cfloop index="x" from="1" to="5"> ...

htmlcssbootstrap-4coldfusionbootstrap-5

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit