Rangeslider.js add decimal Points to output

Question

Hi i'm using this range slider: http://rangeslider.js.org/

I would like to know how to add decimal points on the output div like so: 1.000,000

99% of questions posted are required to have a [MCVE (**M**inimal, **C**omplete, and **V**erifiable **E**xample)](http://stackoverflow.com/help/mcve). Please post JavaScript/jQuery, CSS, and HTML that would be relevant to your question. Create a demo using any or all of the following services: [jsFiddle.net](https://jsfiddle.net/), [CodePen.io](https://codepen.io/), [Plunker.co](http://plnkr.co/), [JS Bin](https://jsbin.com/) or a snippet (7th icon located on the text editor toolbar or CTRL+M). — zer00ne, May 14 '16 at 03:43

score 0 · Answer 1 · answered May 15 '16 at 08:47

Sorry for jumping in, but I am actually having the same question...

The example goes from "0" to "100" - would like to know how to change it in a way that it goes from "0" to "100000" and displays "100.000" instead of "100000".

In addition would be great to know if it is possible to add a "€" sign?

Thanks a ton to everyone who can help!!!

http://codepen.io/andreruffert/pen/meeOav

HTML

<h1>Vertical orientation support</h1>
<input type="range" data-orientation="vertical">
<output></output>

Javascript:

var $element = $('input[type="range"]');
var $output = $('output');

function updateOutput(el, val) {
  el.textContent = val;
}

$element
  .rangeslider({
    polyfill: false,
    onInit: function() {
      updateOutput($output[0], this.value);
    }
  })
  .on('input', function() {
    updateOutput($output[0], this.value);
  });

CSS

output {
  font-size: 2em;
  padding: .3em;
}

Ricardo Santos · Answer 2 · 2016-05-17T01:39:59.287

I figure out a solution with the help of a friend. Make these changes where you call the function to start the slider.

This is how the code look originally:

var $element1 = $('#slider_range_1');
var $output1 = $('#output_1');

$element1
  .rangeslider({
    polyfill: false,
    onInit: function() {
    updateOutput($output1[0], this.value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }
})

.on('input', function() {
    updateOutput($output1[0],parseInt(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    console.log(this.value);
});

The piece of code below formats the output and add the decimal points and dollar sign to it

 .toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')

The code should look like this after you make the changes.

var $element1 = $('#slider_range_1');
var $output1 = $('#output_1');

$element1
  .rangeslider({
    polyfill: false,
    onInit: function() {
    updateOutput($output1[0], this.value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
  }
})

.on('input', function() {
    updateOutput($output1[0],parseInt(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    console.log(this.value);
});

Rangeslider.js add decimal Points to output

2 Answers2