I'm currently working on a project utilizing Vue 2 and Quasar 1, where I am attempting to develop a logarithmic slider. Initially, I managed to create a basic example using a native input slider in this code pen: https://codepen.io/tonycarpenter/pen/ZEVKWbr?editors=1111
function calculateLogarithmicSlider(min, max, sliderPosition) {
const minimumSliderValue = Math.log(min);
const maximumSliderValue = Math.log(max);
const sliderScale = (maximumSliderValue-minimumSliderValue) / (100);
return Math.exp(minimumSliderValue + sliderScale*(sliderPosition));
}
function calculateSliderValue (min, max, sliderPosition) {
return Math.round(calculateLogarithmicSlider(min, max, sliderPosition));
}
const smartRange = {
props: ['min', 'max'],
template:
`
<div>
<label> MIN: {{ min }} MAX: {{ max }} <label>
<input v-on:input='update($event)' type='range'>
</div>
`,
methods: {
update(event) {
const sliderPosition = parseInt(event.target.value)
const sliderValue = calculateSliderValue(this.min, this.max, sliderPosition)
this.$emit('change', sliderValue)
}
}
}
const app = new Vue({
el: document.querySelector('#app'),
components: { smartRange },
data: {
value: 0
},
methods: {
updateVal(newVal) { this.value = newVal }
}
})
My current challenge involves binding this logic to a Quasar slider with an accompanying tooltip that reflects the exponential increase while sliding. I have provided a link to the specific Quasar slider implementation below: https://codepen.io/tonycarpenter/pen/bGOWXKG
While researching solutions online, I stumbled upon one that uses a Quasar range slider with Vue 3 and Quasar 2. However, I would appreciate further clarification as I am not well-versed in Vue 2 compared to Vue 3: https://codepen.io/pdanpdan/pen/XWYPZMq?editors=1111
Any assistance or guidance in this matter would be immensely valuable!