[UI] Input Slider / Range Component

[q-depot]

Hi,

does the UI comes with sliders? I couldn't find it anywhere in the website so I assume it doesn't, but I saw the buttons can be displayed as (toggle)sliders. That's not what I'm looking for but I thought there might be a widget somewhere.

Another note on the side, it would be cool to have a knob widget.

[jlukic]

See #605. We had user contributed slider javascript a few months past, but its not in working shape for the library. See branch ui-slider

If someone wants to rework this into a usable component I'm game for getting into 1.x with a bit more revision.

Otherwise, for my personal contributions, highest priorities currently are: fixing verified 1.0 bugs, adding documentation for undocumented components, and finishing guides for learnsemantic.com

[q-depot]

is that a slider or a scrollbar?

I cloned the ui-slider branch, but I'm struggling to find the slider in the source.

[sevki]

:+1:

[nicbarker]

Would love this feature, don't enjoy having to use the jquery UI component but it does the job at the moment.

[hrstoyanov]

jlukich, Where is the documentation on the new Range component. I could not find it at beta.semantic-ui.com

Thanks for your hard work!

[jlukic]

There is not a new range component with 2.0. Not enough time.

[mjhasbach]

+1

[mrjonny2]

+1

[rachellji]

+1

[scotthasbrouck]

+1

[michahell]

+1

[pfhor]

+1

[avalanche1]

+1

[jeanlescure]

+1

[pulsingbrain]

+1

[Timonzimm]

+1

[jlukic]

I started working on this

[avalanche1]

Jack, please include:

• a vertical variation
• a way to add ticks with text labels to slider axis

[jlukic]

I plan on supporting both of those cases.

[avalanche1]

Nice to have you back!)

[mrjonny2]

Any word on when this will be done? Sorry to rush 😄

[pashadia]

+1

[vakorovin]

+1

[lsunsi]

+1 Awesome work man (:

[namwkim]

+1

[miroslavbucek]

+1 thanks!

[David-Desmaisons]

+1

[ghost]

+1 Slider is useful, unfortunaly I am still using a plugin named 'bootstrap-slider', because I couldn't find any slider component for semantic ui [currently no time to implement my own] and I am migrating all my sites from bootstrap to semantic ui.

[tyleryasaka]

Hey all, I put together a Semantic-inspired range slider module. The design is based off the Semantic UI slider-style checkbox input. It works for both mouse and touchscreen, can be disabled, and comes in all the Semantic UI colors and inverted colors. Seeing how many people are looking for this feature, maybe this will be useful to someone. Not sure where the team is at on implementing a range slider, but I'd be happy to contribute if I could be of help. Demo https://github.com/tyleryasaka/semantic-ui-range

[jeanlescure]

@tyleryasaka that's definitely what I was looking for in terms of look and feel, didn't see a way to set the step amount, as in how much each step adds or removes to the value, I'd say that's the only missing functionality for it to match the native <range> element (http://www.html5tutorial.info/html5-range.php).

Cheers on a job well done :+1: , already starred it in case I need it in the future. I'd propose to the Semantic team to officially pull in this solution.

[tyleryasaka]

Thanks @jeanlescure . Per your suggestion I added the ability to set the step.

[jlukic]

@tyleryasaka Looks great :smile:

[tyleryasaka]

@jlukic Glad you like it :blush:

[hoxxep]

Or, some simple styles to go on top of the HTML5 range input - no JS required. Basic demo: http://codepen.io/anon/pen/xZYpGQ

<input class="ui range" type="range" name="demo" min="0" max="10" step="1">

.ui.range {
  &input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    border: 1px solid #ddd;
    padding: 0;
    height: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  &input[type="range"]:focus {
    border-color: #ccc;
    outline: none !important;
  }

  &input[type="range"]::-moz-range-track {
    background: none;
    border: 0;
  }

  &input[type="range"]::-moz-focus-outer {
    border: 0;
  }

  &input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;

    background: #fff;
    background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    border-radius: 100%;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
  }

  &input[type="range"]::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;

    background: #fff;
    background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    border-radius: 100%;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
  }
}

[reejosamuel]

@hoxxep could you test your snippet, it doesn't work. Btw the library from @tyleryasaka is really good, so is it going to be pulled into semantic?

[hoxxep]

@reejosamuel The codepen demo works in Chrome/Safari, and if I remember right it works for Firefox as well. Styling for Opera and IE has not been done, although it should be very similar.

Note: the codepen example is raw CSS, while the snippet above is LESS.

[antoineschaller]

@tyleryasaka really nice work! Would you have any idea on how to implement a double sided range slider (to input min and max values) ?

[hoxxep]

@antoineschaller http://jqueryui.com/slider/#range with some extra styles (similar to the LESS styles I wrote above, or @tyleryasaka's styles in his GitHub repo) would be one of the easiest methods for now.

[opvini]

http://ionden.com/a/plugins/ion.rangeSlider/en.html

But I think semantic needs to have own slider.

[markudevelop]

+1

[olaf89]

+1

[vladdancer]

+1

[ianbusko]

+1

[mbpakalin]

+1

[chrisvel]

+1

[dxps]

+1 As a pull request on this exists, it's up to @jlukic to add it as a main component. Of course, improvement can be made based on feedback.

[ciajulius]

+1

[geemang2000]

+1 As a reference this component sets the bar: https://refreshless.com/nouislider/

[xiwc]

+1

[pmpr]

+1, Feature not added yet? Is there any schedule on this for near future?