Слайдер+ кальк vue-slider-component как ???

Question

[alekseydemyanenko]

Всем привет!!
Подскажите пожалуйста мне.

есть на vue.js ползунок.



КОД :

new Vue( {
	el: '#app',
	data () {
		return {
			value: 0,
			options: {
				eventType: 'auto',
				width: 'auto',
				height: 13,
				dotSize: 26,
				formatter: "{value}%",
				bgStyle: {
					background: '#ffffff'
				},
				processStyle: {
					background: '#C7E0EF'
				},
				min: 0,
				max: 100,
				interval: 1,
				show: true,
				speed: 1,
				tooltipDir: 'top',
			}
		}
	},
	components: {
		'vueSlider': window[ 'vue-slider-component' ],
	}
});

Как добавить сюда калькулятор что бы когда перетягиваешь ползунок, менялись знаения где 5 лет и там где 10 лет??
Заранее спасибо.

Comments

[Андрей Седышев]

HTML разметку приведите и формулу для расчета

[alekseydemyanenko]

<div class="home-income">
						<div class="h-income-div">5 Years Yield <br> 
							<p class="h-income-num5">$2665
								<span class="h-income-yuan"></span>
							</p>
						</div>
						<div class="h-income-div">10 Years Yield <br> 
							<p class="h-income-num10">$5329
								<span class="h-income-yuan"></span>
							</p>
						</div>
						<div class="h-income-btc-progress">
							<div id="app">
								<vue-slider
								ref="slider"
								v-model="value"
								v-bind="options"
								>
							</vue-slider>
							<p class="h-income-btc-p">Annual Bitcoin Growth Rate<span>{{ value }}%</span></p> <p class="h-income-btc-info">1.46 USD daily revenue with 1080Ti Graphic Card</p></div>
						</div>
					</div>

Answer 1

[Maxim Rak]

Добавьте к компоненту в разметке событие @input="yourNameMethodForCalc" . Ну и напишите сам метод. У него в первом аргументе будет значение ползунка.

Answer 2

[floydback]

В data нужно добавить переменную для слайдера

data () {
    return {
      percent: 0
    }
}

В шаблоне подключаете vue-slider

<vue-slider v-bind="sliderStyleObject" v-model.number="percent" />

где sliderStyleObject - это описание стилей, т.е. то, что у вас сейчас в options

И создайте вычисляемое свойство для цены

computed: {
  price () {
    return myCalc(this.percent)
  }
}