[theme] Support breakpoints.between(a, b) with number

[andreafalco1991]

Why theme.breakpoints.between doesn't take 2 number as optional input type like all the others breakpoints functions?
Is it possibile to add this possibility?
Thanks

[oliviertassinari]

Interesting, why using arbitrary number values instead of the default breakpoints named (sm, md, etc)? Note that you can customize these breakpoints.

[oliviertassinari]

Actually, I see your point: the up and the down helpers support arbitrary values, but the between helper doesn't. For consistency, it would make sense to support it 👍. What about this diff? Do you want to work on it? :)

diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md
index 4f1114504..298e21068 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints.md
@@ -171,8 +171,8 @@ const styles = theme => ({

 #### Arguments

-1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
+1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.

 #### Returns

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
index e05d9588f..b1ff21003 100644
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -38,15 +38,20 @@ export default function createBreakpoints(breakpoints) {
   }

   function between(start, end) {
-    const endIndex = keys.indexOf(end) + 1;
+    const endIndex = keys.indexOf(end);

-    if (endIndex === keys.length) {
+    if (endIndex === keys.length - 1) {
       return up(start);
     }

     return (
-      `@media (min-width:${values[start]}${unit}) and ` +
-      `(max-width:${values[keys[endIndex]] - step / 100}${unit})`
+      `@media (min-width:${
+        typeof values[start] === 'number' ? values[start] : start
+      }${unit}) and ` +
+      `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number'
+        ? values[keys[endIndex + 1]]
+        : end) -
+        step / 100}${unit})`
     );
   }

[andreafalco1991]

Yes is for consistency and 'cause sometimes is usefull. I could work on it, i don't know when but i would do it. When a i have a few time i make this diff.
Thanks

[oliviertassinari]

Great :)

[ghost]

I took the liberty to submit a pull request implementing the proposed changes. If there is additional discussion or more suggestions, I would be happy to be of help.