Вывод данных со слайдера jquery-ui

478

10 июня 2017, 14:51

Как в jquery/jquery-ui сделать вывод данных со слайдера в одно значение после запятой? То есть строка value: [1000, 50000] задает эти значения слайдеру, но проблема в том что они так и выводятся, подскажите есть ли возможность установить вывод в таком формате - 1,1 2,5тоесть чтобы цыфра до запятой это тысячи/тысячные а после сто/сотые как это можно вывести?

Answer 1

задайте step = .001, value: [1,50]

$( "#slider" ).slider({ 
  step:.001, 
  range: true, 
  min: 1, 
  max: 50, 
  values: [ 3, 5 ], 
  slide: function(event, ui) { 
      console.log(ui.values); 
  } 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div id="slider"></div>

UP:

от 1000 до 1000000 => двузначное число:

$( "#slider" ).slider({ 
  min: 3, 
  max: 6, 
  step:.1, 
  slide: function(event, ui) { 
      console.log('число', Math.round(10**ui.value));  
      console.log('запись в два знака', ui.value); 
  } 
});

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <div id="slider"></div>

UP2Линейное отображение (в отличие от перыдущего - точное и захватывает больше вариантов)

const max = 9.9; 
// y = a*x + b; 
// x = 0, y = 1000 =>  
const b = 1e3; 
// x = 9.9, y = 1000000, a = (y-b)/x => 
const a = (1e6-b)/max; //100909.09090909091, можно округлить вниз для удобства использования. но тогда до миллиона не дотянетесь немного 
$( "#slider" ).slider({ 
  min: 0, 
  max: max, 
  step: .1, 
  slide: function(event, ui) { 
      console.log('число', a*ui.value+b);  
      console.log('запись в два знака', ui.value); 
  } 
});

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
        <div id="slider"></div>