Slider Button

Ask the community
,
1

749×663 36 KB

Someone know how can I link the slider button to the R$ (value), so when I move the slider the value changes too?

I have the database with all values, but I don’t know if it’s necessary…

2

$w(“#mySlider”).onChange( (event) => {
let newValue= event.target.value;
$w(" #R$" ).value= newV alue; //may be with some scaling like newValue*10
});

3

As Ayelung has stated above, use the Slider API to do this.

https://www.wix.com/corvid/reference/$w.Slider.html

Slider
Sliders allow users to select a number from a given range.

Sliders offer your users a way of inputting a number by sliding a “handle” one way or the other along a track. You can set the range of values for the slider and also its default value.

The slider’s values can be configured in one of two ways:

  • Value: You define the size of the steps between values, and the slider calculates how many steps fit in the slider’s range.

  • Count: You define the number of steps between the values you want your slider to have, and the slider calculates the size of each step.

https://www.wix.com/corvid/reference/$w.Slider.html#onChange

onChange( )
Adds an event handler that runs when an input element’s value is changed.

Description
An element receives a change event when a user changes the value in an input element.

A change event is not triggered when you change an element’s value using the element’s value property.

Examples
Get the value of the element that was changed

$w("#myElement").onChange( (event) => {
  let newValue = event.target.value;  // "new value"
});
4

Thanks for the feedback!

I solved the problem this way:

$w.onReady( function () {

//Update the value when the slider position changes
$w( ‘#consumo’ ).onChange(event => {
//
//
// Economy Value
//
//
if (event.target.value === 0 ) {
$w( ‘#economia’ ).text = ‘R$ 0,00’ ;
}
else if (event.target.value === 100 ) {
$w( ‘#economia’ ).text = ‘R$ 175.127,523’ ;
}
else if (event.target.value === 200 ) {
$w( ‘#economia’ ).text = ‘R$ 208.046,23’ ;
}
else if (event.target.value === 300 ) {
$w( ‘#economia’ ).text = ‘R$ 240.964,94’ ;
}
else if (event.target.value === 400 ) {
$w( ‘#economia’ ).text = ‘R$ 273.883,64’ ;
}
else if (event.target.value === 500 ) {
$w( ‘#economia’ ).text = ‘R$ 306.802,35’ ;
}
else if (event.target.value === 600 ) {
$w( ‘#economia’ ).text = ‘R$ 339.721,06’ ;
}
else if (event.target.value === 700 ) {
$w( ‘#economia’ ).text = ‘R$ 372.639,77’ ;
}
else if (event.target.value === 800 ) {
$w( ‘#economia’ ).text = ‘R$ 405.558,47’ ;
}
else if (event.target.value === 900 ) {
$w( ‘#economia’ ).text = ‘R$ 438.477,18’ ;
}
else if (event.target.value === 1000 ) {
$w( ‘#economia’ ).text = ‘R$ 488.477,18’ ;
}
//
//
// Investiment Value
//
//
if (event.target.value === 0 ) {
$w( ‘#investimento’ ).text = ‘R$ 0,00’ ;
}
else if (event.target.value === 100 ) {
$w( ‘#investimento’ ).text = ‘R$ 175.127,52’ ;
}
else if (event.target.value === 200 ) {
$w( ‘#investimento’ ).text = ‘R$ 208.046,23’ ;
}
else if (event.target.value === 300 ) {
$w( ‘#investimento’ ).text = ‘R$ 240.964,94’ ;
}
else if (event.target.value === 400 ) {
$w( ‘#investimento’ ).text = ‘R$ 273.883,64’ ;
}
else if (event.target.value === 500 ) {
$w( ‘#investimento’ ).text = ‘R$ 306.802,35’ ;
}
else if (event.target.value === 600 ) {
$w( ‘#investimento’ ).text = ‘R$ 339.721,06’ ;
}
else if (event.target.value === 700 ) {
$w( ‘#investimento’ ).text = ‘R$ 372.639,77’ ;
}
else if (event.target.value === 800 ) {
$w( ‘#investimento’ ).text = ‘R$ 405.558,47’ ;
}
else if (event.target.value === 900 ) {
$w( ‘#investimento’ ).text = ‘R$ 438.477,18’ ;
}
else if (event.target.value === 1000 ) {
$w( ‘#investimento’ ).text = ‘R$ 488.477,18’ ;
}
//
//
//
//
// Payback Time
//
//
//
if (event.target.value === 0 ) {
$w( ‘#payback’ ).text = ‘Nenhum’ ;
}
else if (event.target.value === 100 ) {
$w( ‘#payback’ ).text = ‘1 Ano’ ;
}
else if (event.target.value === 200 ) {
$w( ‘#payback’ ).text = ‘2 Anos’ ;
}
else if (event.target.value === 300 ) {
$w( ‘#payback’ ).text = ‘3 Anos’ ;
}
else if (event.target.value === 400 ) {
$w( ‘#payback’ ).text = ‘4 Anos’ ;
}
else if (event.target.value === 500 ) {
$w( ‘#payback’ ).text = ‘5 Anos’ ;
}
else if (event.target.value === 600 ) {
$w( ‘#payback’ ).text = ‘6 Anos’ ;
}
else if (event.target.value === 700 ) {
$w( ‘#payback’ ).text = ‘7 Anos’ ;
}
else if (event.target.value === 800 ) {
$w( ‘#payback’ ).text = ‘8 Anos’ ;
}
else if (event.target.value === 900 ) {
$w( ‘#payback’ ).text = ‘9 Anos’ ;
}
else if (event.target.value === 1000 ) {
$w( ‘#payback’ ).text = ‘10 Anos’ ;
}
})
});

5

How do I stop the display output from rounding? I need the display to show in increments of .25, and I have the code set as below, but my output is auto rounding to .2 and .8 instead of .25 and .75:

let sliderStep = $w( “#slider1” )
$w( “#slider1” ).max = 4.00 ;
$w( “#slider1” ).min = - 8.00
$w( “#slider1” ).step = 0.25
$w( “#slider1” ).stepType = “value”