Vuetify: Slider with step not start with the right value

Created on 11 Jul 2018  路  1Comment  路  Source: vuetifyjs/vuetify

Hello guys!

Versions and Environment

Vuetify: 1.1.1
Vue: 2.5.2
Browsers: Chrome, Firefox
OS: Ubuntu 16.04

Expected Behavior

I want to use Slider with :

  • min = 45
  • step = 2

So, get values like 45, 47, 49....

Actual Behavior

Actually, it start at 46 not 45

Reproduction Link

Codepen

has PR bug

Most helpful comment

The problem is in the roundValue (value) method of VSlider component:

roundValue (value) {
  if (!this.stepNumeric) return value
  // Format input value using the same number
  // of decimals places as in the step prop
  const trimmedStep = this.step.toString().trim()
  const decimals = trimmedStep.indexOf('.') > -1
    ? (trimmedStep.length - trimmedStep.indexOf('.') - 1)
    : 0

  const newValue = Math.round(value / this.stepNumeric) * this.stepNumeric

  return parseFloat(Math.min(newValue, this.max).toFixed(decimals))
},

>All comments

The problem is in the roundValue (value) method of VSlider component:

roundValue (value) {
  if (!this.stepNumeric) return value
  // Format input value using the same number
  // of decimals places as in the step prop
  const trimmedStep = this.step.toString().trim()
  const decimals = trimmedStep.indexOf('.') > -1
    ? (trimmedStep.length - trimmedStep.indexOf('.') - 1)
    : 0

  const newValue = Math.round(value / this.stepNumeric) * this.stepNumeric

  return parseFloat(Math.min(newValue, this.max).toFixed(decimals))
},
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments

efootstep picture efootstep  路  3Comments

paladin2005 picture paladin2005  路  3Comments

jofftiquez picture jofftiquez  路  3Comments

chriswa picture chriswa  路  3Comments