soanvig / mm-jsr Goto Github PK

This will optimize the script.

Add unit tests.
Aim 100% coverage.

Add help (question mark somewhere) explaining how to use this tool.

Mostly how to use it with keyboard (CTRL or SHIFT switches).

Hi, thanks for widget, looks very cool.
But just want to import your component as ES module and let my bundler do all the job, shake the tree, generate src mapping and etc,
because now it's a hell trying to debug minified dist version of your component.
So, please, include src folder into npm package back.

Currently it's not impossible to set count of lines for grid. I found return Math.round(100) in your code )
I think, it's really important feature. It is for me, at least.

Same thing is count of labels for grid. Now, the value is "each 10 lines".

In my case it looks like this: http://bit.ly/2L4Jef4

I suggest, the script should calculate optimal count of lines and labels itself.

It was a feature in v1.

What information would be useful in logging and for what?

Hi,

does not add its size when the labels are separated.

Hey! Can I fill progress just with one slider like here:

Slider should correctly expose its role for AT usage. It should also expose minimal and maximal value via appropriate ARIA attributes.

Just like (old) owlCarousel does. This will allow to access it without access to variable.

Hi, you have a lot of required options in the constructor, but they are not required explicitly, frustrating a bit and causing a lot of time losses.

• options parameter - if it's absolutely required (but intuitively I expect if I pass a single dom element it should work with default options) then check if it's not undefined in the constructor, please.
• values - why not to set them as 0 by default? Or throw a meaningful error at least. Now if no values field specified in options object - some "cannot get length from undefined" error appears with no idea what's going on. Check if it's not undefined in the constructor, please
• sliders - why do you need this count? I pass an array with dom elements, you can get the length of this array? Or to validate what did you find by given CSS selector? Then again check if sliders is not undefined, otherwise throw an error it's required.
  Without such options validation, there are a lot of errors thrown from the depths of the minified component, so it's frustrating.
  Usually looking into docs is the last idea, first, you will hope error message will say what's wrong.
  If error looks like not expected by the author (it looks so in the cases above) - then you will try to look into the sources right in the browser (because it's an open-source software) and you will see minified version only (that's why I asked for src in npm package in another issue)

By the way, a quick question - is there any chance to init range with not attached to the body element?

I noticed that after adding an NPM dependency for mm-jsr 1.1.15 in my package.json, the corresponding package.lock.json file now has numerous entries for babel-plugin-transform-* related packages required by babel-preset-es2015-rollup as well as an entry for grunt-contrib-copy. Is this expected? Are these actually runtime dependencies or can they be removed?

Demo link in project's description does not work correctly, 404.

http://imgur.com/a/nTSlp

This will erase need for creating multiple html elements.

Grid color can be programmaticaly retrieved from defined .jsr_grid CSS color property.

It would be nice to show the value hovered by mouse.

If limit is not rounded to step ratio, they are vulnerable to be exceeded by value rounded to stepRatio.

E.g.:

stepRatio = 0.1;
value = 0.998;
limit = 0.999;

roundedValue = 1;

roundedValue > limit

It should not be a problem, but better consistency === better code.

When moving slider from range1, and releasing mouse over range2, range2 catches the event and sets value.

• 1. formatter
• 2. change limit
• 3. allow to configure modules (including changing limit visibility)
• 4. change value
• 5. retrieve value
• 6. listen on value change
• 7. enable/disable
• 8. destroy (refresh?)

does not work setvalue
It does not move.
I'm missing something?

var rangeInput;
...
function crearRange(){
  rangeInput = new JSR(['#rangeDesde', '#rangeHasta'], {
    sliders: 2,
    step: 1,
    min: 0,
    max: maxPrecio,
    values: [0, maxPrecio],
    labels: {
      formatter: function(v){
        return '$ '+v;
      }
    }
  });

}

later....

rangeInput.setLimit( 1, 200 ).refresh();

But I do not see any change on the screen

Moving finger up/down during moving slider on touch device moves screen. Because of that it is impossible to move finger away to see the value being selected (the screen moves with the finger).

Properly created preventDefault should do the trick. Or this solution could be applied somehow: https://stackoverflow.com/a/40598268

If slider is in move slider should receive .active class.

This makes styling the slider available (without using focus, which has different purpose).

Arrow up should work like arrow right (value up)
Arrow down should work like arrow left (value down)

Those will be functions formatting output going to label (preserving original numbers).

The functions could be overwritable by user to create i.e. Date range picker (the number would be seconds timestamp but formatted through function and displayed as readable date).

It was present in v1 version, though for now (during development of v2 version) I doubt, that these labels are useful for anything.

I'm talking about labels showing minimum and maximum variable on slider:

Is any useful?

the most of mathematical activities is good as possible but right now i got this
https://ibb.co/k5FwcNp
it does not look the best, adding numbers in js has its drawbacks

In Core there are two methods:
_setValue - which accepts ratio
setValue - which accepts real, converts it to ratio and executes _setValue

This is misleading. It should be changed into:
_setRatioValue
and
_setRealValue

Connected with #10

In documentation: /dist/assets/css/mm-jsr.css.

Correct path is /dist/assets/css/main.css

Help is appreciated, because I don't have experience with Angular almost at all.

In the wiki start page (https://github.com/mm-jsr/jsr), the most top link and the DEMO link are incorrect

Good job !!

It'd be nice to have ability to install this range as a npm package.

I apologize in advance for being a complete novice, but I love this slider and was wondering if there is a change event I use for when values are updated. The natural onchange event of the input control doesn't seem to fire.

Is it possible to set value formatter only for active value label instead of all the ticks in the grid?

How is it possible to destroy the control while using it in React or Angular components?