light-bootstrap-dashboard icon indicating copy to clipboard operation
light-bootstrap-dashboard copied to clipboard

[PRO] No styling for <input type="range"/>

Open nzjrs opened this issue 7 years ago • 3 comments

(I couldn't find the bugtracker for the pro version, so filing here as it probably applies)

It's a shame that you have styling for jQuery UI slider, but not for the HTML5 standard input type=range slider.

nzjrs avatar May 09 '17 08:05 nzjrs

@nzjrs thank you for using our product and for this suggestion. We wanted to have a plugin that can be customized to look as our product. Unfortunately type="range" or type="file" or Select cannot be customized to look the same on all browsers, they have a lot of issues when you try to do that. That's why we use 3rd party libraries. Makes sense?

Best, Alex

alexandru-paduraru avatar May 11 '17 20:05 alexandru-paduraru

Hi Alex,

Thanks for your reply. Unfortunately I disagree for a couple of reasons.

  1. jquery ui slider is worse performing on mobile. The native input range element has better touch interaction in my experience. While jquery mobile slider is a bit better, you don't support this

  2. you don't style tick marks on your slider (or at least show this in the demos), which makes it not useful for a variety of applications.

  3. let's support html5. Caniuse says range slider is over 94% (and there are polyfills available). Not everything has to be jquery.

  4. cross browser theming is more or less possible. I've had success with http://danielstern.ca/range.css/#/

  5. if you insist on depending on an external JS lib for the slider, please consider http://seiyria.com/bootstrap-slider/ because it is at least an improvement upon input range, and not just a replacement for it.

While the minimal style slider you include undoubtedly looks nice, it is far to simple for most slider use cases. I hope it wasn't a case of "form over function"

John

On 11 May 2017 22:38, "Alex Paduraru" [email protected] wrote:

@nzjrs https://github.com/nzjrs thank you for using our product and for this suggestion. We wanted to have a plugin that can be customized to look as our product. Unfortunately type="range" or type="file" or Select cannot be customized to look the same on all browsers, they have a lot of issues when you try to do that. That's why we use 3rd party libraries. Makes sense?

Best, Alex

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/light-bootstrap-dashboard/issues/20#issuecomment-300910285, or mute the thread https://github.com/notifications/unsubscribe-auth/AACjo4_ETgua2r6WpFRptsovdWAcWrlDks5r43HYgaJpZM4NU-OS .

nzjrs avatar May 12 '17 06:05 nzjrs

@nzjrs Hi John,

Thank you for the detailed explanation and sorry for the late response, we've been busy with the launch of a new UI Kit based on BS4: http://demos.creative-tim.com/now-ui-kit/index.html

I've checked the library that you presented and seems pretty complex and powerful, we've also started to use this library in our latest releases: https://refreshless.com/nouislider/ what do you think about it? Also, there is a possibility of using the CSS but I from what we've seen, in general, developers want to have "more control" over an item and such libraries can help more than the default input.

For the case of "form over function", that's clear that we don't want to do that and we are always looking to improve the products based on the feedback :D, For example, we used that slider in the e-commerce page of GSDK PRO: http://gsdk.creative-tim.com/ecommerce.

Best, Alex

alexandru-paduraru avatar May 16 '17 20:05 alexandru-paduraru