Slider to show customized values

Ask the community
,
1

Hello, I am trying to show customized values for the Wix slider instead of the numerical values (Excellent, Good, Average, Okay, Bad). Is there a way to do this?

2

Hi Melissa ,

As a setup for the slider, you can only choose a numerical values.But you can customize that with few lines of code, Ex:

export function slider_change(event) {
let value = $w("#slider").value; //assume the value selected = 1
console.log(value); // 1
if(value==1){
value = "good"
}
console.log(value); // good
}

Hope this helps!
Best,

Mustafa

3

Hi Mustafa, thanks again for helping! :slight_smile: I am actually trying to get the text on the slider to show “good”, is there a way to do that?

4

There’s no direct way of doing that yet, but an alternative way is to modify the design of the slider ( try to hide the numbers above the slider) then place a text above it, after that you can use this snippet code to show the text instead of number :


export function slider_change(event) {
let value = $w("#slider").value;
switch (value) {
   case 1:
       $w("#text1").text = "good";
       break;
   case 2:
       $w("#text1").text = "ok";
       break;
   case 3:
       $w("#text1").text = "nice";
       break;

}
}
5

Thanks so much for trying to help! Unfortunately, user input sliders don’t have “.text” values, I’ve tried… :confused:

6

Yeah exactly!
because the slider does not have .text property, you have to add a text element above the slider and assign the value to it. If you take another look at the code i wrote, you can see that the text value changes based on the slider value :


 let value = $w("#slider").value; // this takes the slider value
 switch (value) {
  case 1: $w("#text1").text = "good"; // change the text above the slider
 break; 
   case 2: $w("#text1").text = "ok";
  break;