Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

v2 - make range-input customisation unnecessary #527

Closed
Haroenv opened this issue Sep 20, 2018 · 1 comment
Closed

v2 - make range-input customisation unnecessary #527

Haroenv opened this issue Sep 20, 2018 · 1 comment

Comments

@Haroenv
Copy link
Contributor

Haroenv commented Sep 20, 2018

Feedback on the v2 alpha version 🆕

Describe the bug / features

We use -Infinity / Infinity as values, but those need to be adjusted often to be correct. Let's change those values to be more straightforward

Reproduction

see usages in

.add('with a custom render', () => ({
template: `
<ais-range-input attribute="price">
<template slot-scope="{ refine, currentRefinements }">
<form @submit.prevent="refine(min, max)" >
<label>
<input
type="number"
:max="this.max"
:placeholder="this.max"
:value="currentRefinements && currentRefinements[0]"
@change="min = $event.currentTarget.value"
/>
</label>
<span>to</span>
<label >
<input
type="number"
:max="this.max"
:placeholder="this.max"
:value="currentRefinements && currentRefinements[1]"
@change="max = $event.currentTarget.value"
/>
</label>
<button type="submit">Go</button>
</form>
</template>
</ais-range-input>
`,
data() {
return {
min: undefined,
max: undefined,
};
},
}))
.add('with vue-slider-component', () => ({
template: `
<ais-range-input attribute="price">
<template slot-scope="{ refine, currentRefinements, range }">
<vue-slider
:min="range.min"
:max="range.max"
:value="toValue(currentRefinements, range)"
@input="refine($event[0], $event[1])"
/>
</template>
</ais-range-input>
`,
methods: {
toValue([min, max], range) {
return [
min === -Infinity ? range.min : min,
max === Infinity ? range.max : max,
];
},
},
components: { VueSlider },
}))
.add('with vuetify slider', () => ({
template: `
<v-app>
<ais-range-input attribute="price">
<template slot-scope="{ refine, currentRefinements, range }">
<v-range-slider
:min="range.min"
:max="range.max"
:value="toValue(currentRefinements, range)"
@input="refine($event[0], $event[1])"
/>
</template>
</ais-range-input>
</v-app>
`,
data() {
return {
price: [5, 20],
};
},
methods: {
toValue([min, max], range) {
return [
min === -Infinity ? range.min : min,
max === Infinity ? range.max : max,
];
},
},

How to resolve or implement the fix?

avoid Infinity as a value

What is the version you are using?

v2.0.0-alpha.1

@Haroenv
Copy link
Contributor Author

Haroenv commented Nov 6, 2018

done in #560

@Haroenv Haroenv closed this as completed Nov 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant