sort-by prop Numerical Ordering Issue

I am using an ais-refinement-list and running into an issue where I cannot properly control the sort-by prop. I am specifying :sort-by="['isRefined:desc', 'name:asc']" but the results are returning in the following order:

• 1000-2000
• 10001-11000
• 11001-12000
• 12001-15000
• 15001-20000
• 20001-50000
• 2001-3000
• 3001-4000
• 4001-5000
• 5001-6000

It would be helpful to be able to tell Algolia to sort these results like you would sort actual numbers, like this:

• 1000-2000
• 2001-3000
• 3001-4000
• 4001-5000
• 5001-6000
• 10001-11000
• 11001-12000
• 12001-15000
• 15001-20000
• 20001-50000

[intrepidws]

Thanks.

For anyone faced with a similar issue, this is how we fixed it.

First, added a sort method:

const app = new Vue({
    el: '#app',
    data: function() {
        return {
            query: ''
        }
    },
    methods: {
        numberAsc: function (a, b) {
            if (a.isRefined && b.isRefined) {
                return a.name.split('-')[0] - b.name.split('-')[0]
            } else if (b.isRefined) {
                return 1
            } else if (a.isRefined) {
                return -1
            } else {
                return a.name.split('-')[0] - b.name.split('-')[0]
            }
        }
    },
    components: {
        'ais-event-wrapper': AisEventWrapper
    }
});

Then referenced this sort method:

<ais-refinement-list attribute-name="attribute-name" :limit=15 :sort-by="numberAsc"></ais-refinement-list>

[Haroenv]

That’s what I meant, thanks for sharing your solution!